js 倒计时到期自动隐藏滑动到指定位置显示默认cookie记录暂不显示的时间段

Author：友儿
发布时间：May 16, 2019
9435 views
关闭评论
3607 words
Categories：前端

效果展示：

指定倒计时
到期自动隐藏
滑动到指定位置显示倒计时
默认cookie记录暂不显示的时间段（cookie设置域）
不多说直接看代码

Last modification：August 20, 2020

如果觉得我的文章对你有用，请随意赞赏

Comment here is closed

js 倒计时到期自动隐藏滑动到指定位置显示默认cookie记录暂不显示的时间段

友儿 • 2019 年 05 月 16 日

<p>效果展示：<br><img src="https://niuzheng.net/usr/themes/handsome/assets/img/loading.svg" alt="效果" title="效果" style=""data-original="http://niuzheng.net/wp-content/uploads/2019/05/2-1024x757.png"></p><ol><li>指定倒计时</li><li>到期自动隐藏</li><li>滑动到指定位置显示倒计时</li><li><p>默认cookie记录暂不显示的时间段（cookie设置域）<br>不多说直接看代码</p><div class="wrapper" id="wrapper">
     <img class="backgroundmap-bottom herf-img" src="count-down.png" width="1200">
     <img class="backgroundmap-middle herf-img" src="count-down1.png" width="1200">
     <img class="backgroundmap-countdown" src="dao-ji-shi.png" id="backgroundmap-countdown">
     <div class="countdown herf-img" id="showTime"></div>
 </div><script type="text/javascript">
     //输入一个倒计时开始时间
     var isTime = new Date('2020-10-20');
     var showTime = document.getElementById('showTime');
     if (showTime != undefined) {
         //计算倒计时的函数
         function datetime() {
             var isillis = isTime.getTime() - new Date().getTime();
             if (isillis > 0) {
                 var tian = Math.floor(isillis / 1000 / 60 / 60 / 24);
                 if (tian < 10) {
                     tian = '0' + tian;
                 }
                 var hours = Math.floor((isillis - tian * 24 * 60 * 60 * 1000) / 1000 / 60 / 60);
                 if (hours < 10) {
                     hours = '0' + hours;
                 }
                 var minutes = Math.floor((isillis - tian * 24 * 60 * 60 * 1000 - hours * 60 * 60 * 1000) / 1000 / 60);
                 if (minutes < 10) {
                     minutes = '0' + minutes;
                 }
                 var seconds = Math.floor((isillis - tian * 24 * 60 * 60 * 1000 - hours * 60 * 60 * 1000 - minutes * 60 * 1000) / 1000);
                 if (seconds < 10) {
                     seconds = '0' + seconds;
                 }
                 showTime.innerHTML = "<div>" + "<span class='insert-part'>" + tian + '</span><span class="tian">天<span class="insert-part"></span></span>' + "<span class='insert-part'>" + hours + '</span><span class="shi">时??<span class="insert-part">:??</span></span>' + "<span class='insert-part'>" + minutes + '</span><span class="fen">分??<span class="insert-part"></span></span>' + "<span class='insert-part'>" + seconds + '</span><span class="miao">秒</span>' + "</div>";
             } else {
                 //时间结束清除定时器
                 clearInterval(id);
                 //隐藏倒计时动画
                 $("#wrapper").hide();
             }
         }
 
         datetime();
     }
     //执行定时器
     var id = setInterval(datetime, 1000);
 
     //点击倒计时跳转到
     $(".herf-img").click(function () {
         window.location.href = "/";
     });
     //是否关闭倒计时页面
     $("#backgroundmap-countdown").click(function () {
         $("#wrapper").hide();
         if (!getCookie('_timer')) {
             setCookie('_timer', 1, 1)
         }
     });
 
     //设置倒计时页面不显示时间以及cookie域
     function setCookie(cname, cvalue, exdays) {
         var d = new Date();
         d.setTime(d.getTime() + (exdays2460601000));
         var expires = "expires=" + d.toUTCString();
         document.cookie = cname + "=" + cvalue + "; " + expires + ";path=/;domain=test.com";
     }
 
     //获取关闭倒计时的信息
     function getCookie(cname) {
         var name = cname + "=";
         var ca = document.cookie.split(';');
         for (var i = 0; i < ca.length; i++) {
             var c = ca[i].trim();
             if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
         }
         return "";
     }
 
     $(function () {
         // 监听滚动事件
         $(window).scroll(function () {
             if (getCookie('_timer')) {
                 return false;
             }
             // 获得div的高度
             var h = $("#scroll-a").offset().top;
             // if($(this).scrollTop()>h &amp;&amp; $(this).scrollTop() < h+$("#zui_xin").height()){
             if ($(this).scrollTop() > h) {
                 // 滚动到指定位置
                 $("#wrapper").show();
             } else {
                 $("#wrapper").hide();
             }
         });
     })
 </script></li></ol>

js 倒计时到期自动隐藏滑动到指定位置显示默认cookie记录暂不显示的时间段

带你走入redis的应用场景

php 管道/流水线/Pipeline模式指的是什么？

简单聊一聊Redis持久化

带你一步步用php实现redis分布式、高并发库存问题

go语言之IO操作(待补充)

Swoole协程与传统fpm同步模式比较

2019-PHP面试题大全【面向对象部分】

redis介绍、安装以及数据类型

影楼婚纱模特照片高清图片素材(15P)

nginx嵌入lua 解析get和post请求

js 倒计时到期自动隐藏滑动到指定位置显示默认cookie记录暂不显示的时间段

js 倒计时 到期自动隐藏 滑动到指定位置显示 默认cookie记录暂不显示的时间段

js 倒计时到期自动隐藏滑动到指定位置显示默认cookie记录暂不显示的时间段