倒计时案例

<html>

<head>
    <title>倒计时</title>
    <!--以下为css样式-->
    <style type="text/css">
        .daojishi h2 {
            font-family: Helvetica, Microsoft YaHei, Arial, sans-serif;
            font-size: 14px;
            margin-bottom: 5px;
            color: #151515;
        }

        .daojishi #timer {
            font-family: Helvetica, Microsoft YaHei, Arial, sans-serif;
            font-size: 14px;
            color: #151515;
            font-weight: bold;
        }
    </style>

</head>

<body>
    <div class="daojishi">
        <h2>剩余时间为:</h2>
        <div id="timer">
        </div>

        <h2>数据是
            <span id="spans"></span>
        </h2>
    </div>

    <script>
        // new Date(年份, 月份, 日, 时, 分, 秒)

        var elements = document.getElementById("timer")
        var Future = new Date(2018, 6, 21, 10, 0, 8)
        // timer(elements, Future)

        class bctime {
            constructor() {
                this.el = "",
                this.times = ""
            }
            toString(el, times) {
                timer(el, times)
                function timer(el, times) {
                    var ts = (times) - (new Date());//计算剩余的毫秒数  
                    var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数  
                    var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数  
                    var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数  
                    var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数  
                    dd = checkTime(dd);
                    hh = checkTime(hh);
                    mm = checkTime(mm);
                    ss = checkTime(ss);
                    el.innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
                    setInterval(() => {
                        timer(el, times)
                    }, 1000);
                    if (parseInt(dd) == 0 && parseInt(hh) == 0 && parseInt(mm) == 0 && parseInt(ss) == 0) {
                        clearInterval(timer)
                    }
                }
                function checkTime(i) {
                    if (i < 10) {
                        i = "0" + i;
                    }
                    return i;
                }
            }
        }

        var newbctime=new bctime();
        newbctime.toString(elements,Future)

        // var spans = document.getElementById("spans")
        // text = spans
        // debugger
        // function test(els) {
        //     els.innerHTML = "夏甜甜"
        //     console.log(els)
        // }
        // test(text)
    </script>
</body>

</html>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值