jQuery毫秒倒计时
jQuery毫秒倒计时
史文帝 发表于1年前
jQuery毫秒倒计时
  • 发表于 1年前
  • 阅读 57
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="author" content="https://my.oschina.net/u/3010603/blog" />
        <title>jQuery毫秒倒计时</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                var times = 60 * 100; // 60秒  6000毫秒
                countTime = setInterval(function() { //
                    times = --times < 0 ? 0 : times;

                    var ms = Math.floor(times / 100).toString(); //把times除以100取整数,转换为字符字符串

                    if(ms.length <= 1) {
                        ms = "0" + ms;
                    }
                    var hm = Math.floor(times % 100).toString(); //把time的百分比取小数点后面的两位数转换为字符字符串
                    if(hm.length <= 1) {
                        hm = "0" + hm;
                    }
                    if(times == 0) {
                        $("#_txt").html("倒计时结束");
                        clearInterval(countTime);
                    }
                    // 获取分钟、毫秒数
                    $(".a").html(ms);
                    $(".b").html(hm);
                }, 10);
            });
        </script>
        <style>
            .warp {
                width: 100%;
                height: 100px;
                line-height: 100px;
                text-align: center;
                font-size: 40px;

            }
            
            .warp strong {
                width: 100px;
                display: inline-block;
                text-align: center;
                font-family: georgia;
                color: #C9302C;
            }
        </style>
    </head>

    <body>
        <div class="warp">
            <strong class="a">60</strong>秒 <strong class="b"></strong>毫秒
        </div>

        <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

            <div id="_txt"></div>
        </div>
    </body>

</html>

效果:

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 23
码字总数 8566
×
史文帝
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: