简单的到计时

示例


代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 50px;
            margin: 200px auto;
        }

        span {
            width: 50px;
            height: 50px;
            float: left;
            margin-left: 5px;
            background-color: tomato;
            color: black;
            line-height: 50px;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            border-radius: 10px;
        }

        .colon {
            width: 10px;
            background-color: white;

        }
    </style>
</head>

<body>
    <div>
        <span class="num">1</span>
        <span class="num">2</span>
        <span class="colon">:</span>
        <span class="num">3</span>
        <span class="num">4</span>
        <span class="colon">:</span>
        <span class="num">6</span>
        <span class="num">7</span>
    </div>
</body>

</html>
<script src="./js/jquery-3.1.1.min.js"></script>
<script>
    $(function () {
        //1. 指定倒计时的到期时间(2018-5-30 14:00:)
        //可以直接使用年月日时分秒来创建一个date对象,但是月是从0开始的
        var to = new Date(2018, 4, 30, 12, 34, 10);

        function antitime() {
            var now = new Date();

            //2. 拿到当前时间和过期时间之间的时间差(毫秒)
            var deltaTime = to - now; //到期时间和当前时间相差的毫秒数

            //如果超时了,就停止倒计时
            if (deltaTime <= 0) {
                //停止计时器
                window.clearInterval(timer);
                //停止执行下面的代码
                return;
            }

            //已知毫秒数,算出几分几秒几秒
            var m = Math.floor(deltaTime / (60 * 1000));
            //算出有多少秒
            var s = Math.floor(deltaTime / 1000 % 60);
            //算出多少毫秒, 毫秒数只显示10位和百位
            var ms = Math.floor(deltaTime % 1000 / 10);

            //把时间的数字转成字符串, 如果分秒毫秒不足10, 则前面补0
            var timeStr = "" + (m < 10 ? "0" + m : m) + (s < 10 ? "0" + s : s) + (ms < 10 ? "0" + ms : ms);
            // console.log(timeStr);

            // each是用来遍历.num元素
            $(".num").each(function (index, span) {
                //console.log(span);
                // substring 是用来提取字符串中介于两个指定下标之间的字符
                $(span).html(timeStr.substring(index, index + 1));
            });
        }
        //每十毫秒执行一次
        var timer = setInterval(antitime, 10);
    })
</script>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值