效果展示:
效果

  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>

关注友儿不迷路

Last modification:August 20th, 2020 at 02:35 pm
如果觉得我的文章对你有用,请随意赞赏