js學習小筆記

時間 2019-11-20

原文原文鏈接

                                                                     js學習小筆記

1.$.cookie('history_back', backurl, { expires: 7, path: '/' })：建立一個key爲"history_back"，value爲backurl，過時時間爲7天，生效路徑爲根路徑的cookie。javascript

實現網頁的消息推送效果：css

<DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
        body{  
            margin:0;  
        }  
  
        .pop{  
            width:400px;  
            height:300px;  
            background-color:#fff;  
            border:1px solid #ccc;  
            position:fixed;  
            left:50%;  
            top:50%;  
            margin-left:-200px;  
            margin-top:-250px;  
            z-index:9999;  
            opacity:0;  
            filter:alpha(opacity=0);  
  
        }  
  
        .pop span{  
            float:right;  
            font-size:30px;  
            cursor:pointer;  
        }  
  
        .mask{  
            width:100%;  
            height: 100%;  
            background-color:#000;  
            opacity:0.6;  
            filter:alpha(opacity=60);  
            position:fixed;  
            z-index:9990;  
            left:0;  
            top:0     
        }  
        .pop_con{  
            display:none;  
        }  
  
        .hasknow{  
            text-align:center;  
            cursor:pointer;  
            margin-top:100px;  
        }  
    </style>  
  
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>  
    <script type="text/javascript" src="../js/jquery.cookie.js"></script>  
    <script type="text/javascript">  
        $(function(){  
  
            var read = $.cookie('hasread');  
  
            //alert(read);  
  
            if(read==undefined)  
            {  
                $('.pop_con').show();  
                $('.pop').animate({marginTop:-150,opacity:1});                
            }  
  
            $('.hasknow').click(function() {  
  
                $.cookie('hasread','ok',{expires:7,path:'/'});  
                $('.pop_con').hide();  
  
            });           
        })  
  
    </script>  
</head>  
<body>  
      
    <div class="pop_con">  
        <div class="pop">  
            <span>×</span>  
            <p>咱們網站有優惠，趕忙行動吧！親！</p>  
            <p class="hasknow">我知道了</p>  
        </div>  
        <div class="mask"></div>  
    </div>  
  
    <h1>網站首頁</h1>  
</body>  
</html>