jquery.cookie广告弹窗点击关闭后一天弹一次

jQuery代码
来源：站三界导航
197阅读
2022-09-22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>简单利用jquery.cookie插件使弹窗点击关闭后一天弹一次</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
 
        .alert_windows{
            display:none;
            position:absolute;
            z-index:10;
            width:400px;
            height:300px;
            background:#566F93;
        }
 
        .alert_windows span{
            float:right;
            width:30px;
            height:30px;
            text-align:center;
            font:15px/30px Microsoft Yahei;
            cursor:pointer;
            color:#333;
            background:lightblue;
        }
 
        .alert_windows span:hover{
            color:#EEE;
            background:red;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
</head>
 
<body>
<div style="font-size:24px;width:360px;margin:40px auto;">提示：一天弹一次，关闭了就没了</div>
 
    <div class="alert_windows">
        <span>X</span>
    </div>
</body>
</html>

<script type="text/javascript">
        $(function(){
            if($.cookie("isClose") != 'yes'){
                var winWid = $(window).width()/2 - $('.alert_windows').width()/2;
                var winHig = $(window).height()/2 - $('.alert_windows').height()/2;
                $(".alert_windows").css({"left":winWid,"top":-winHig*2});    //自上而下
                $(".alert_windows").show();
                $(".alert_windows").animate({"left":winWid,"top":winHig},1000);
                $(".alert_windows span").click(function(){
                    $(this).parent().fadeOut(500);
                    $.cookie("isClose",'yes',{ expires:1/8640});    //测试十秒
                    //$.cookie("isClose",'yes',{ expires:1});        一天
                });
            }
        });
    </script>

jquery.cookie.js是需要加载的，也可以直接复制到script代码中，主要用于保存时间至本地化，完成弹窗关闭后，一天只弹一次。

/*jquery.cookie start*/
jQuery.cookie = function(name, value, options) {
      if (typeof value != 'undefined') {
                options = options || {};
                if (value === null) {
                          value = '';
                          options = $.extend({}, options);
                          options.expires = -1;
                }
                var expires = '';
                if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
                          var date;
                          if (typeof options.expires == 'number') {
                                    date = new Date();
                                    date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));     //这里改时间，单位毫秒，默认为1天。
                          } else {
                                    date = options.expires;
                          }
                          expires = '; expires=' + date.toUTCString();
                }
                var path = options.path ? '; path=' + (options.path) : '';
                var domain = options.domain ? '; domain=' + (options.domain) : '';
                var secure = options.secure ? '; secure' : '';
                document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
      } else {
                var cookieValue = null;
                if (document.cookie && document.cookie != '') {
                          var cookies = document.cookie.split(';');
                          for (var i = 0; i < cookies.length; i++) {
                                    var cookie = jQuery.trim(cookies[i]);
                                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                                              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                              break;
                                    }
                          }
                }
                return cookieValue;
      }
};
/* jquery.cookie end */

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/10364.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇： CSS滚动条实现步骤及美化小技巧

下一篇： javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈