效果展示:

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('<?php echo END_TIME_GIVE_GOLD;?>');
    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()+(exdays*24*60*60*1000));
        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 && $(this).scrollTop() < h+$("#zui_xin").height()){
            if($(this).scrollTop()>h){
                // 滚动到指定位置
                $("#wrapper").show();
            } else {
                $("#wrapper").hide();
            }
        });
    })
</script>

以上是部分代码!

[全部代码链接地址](链接:https://share.weiyun.com/5oa4lCo 密码:wqqmt7 "全部代码链接地址")

Last modification:July 16th, 2019 at 03:32 pm
如果觉得我的文章对你有用,请随意赞赏