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

效果展示:

                                                                        效果

  1. 指定倒计时
  2. 到期自动隐藏
  3. 滑动到指定位置显示倒计时
  4. 默认cookie记录暂不显示的时间段(cookie设置域)
    不多说直接看代码
<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>

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

短暂又灿烂的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值