• 技术文章 >web前端 >js教程

    js怎么实现倒计时的功能?(精准到毫秒)

    藏色散人藏色散人2018-08-06 15:16:54原创2503
    本篇文章主要介绍了js实现倒计时的效果,并且精准到毫秒,需要的朋友可以参考下,希望对大家有所帮助。

    js实现倒计时具体代码示例如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="" />
        <title>js精确到毫秒的倒计时代码 </title>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var times = 60 * 100; // 60秒
                countTime = setInterval(function() {
                    times = --times < 0 ? 0 : times;
                    var ms = Math.floor(times / 100).toString();
    
                    if(ms.length <= 1) {
                        ms = "0" + ms;
                    }
                    var hm = Math.floor(times % 100).toString();
                    if(hm.length <= 1) {
                        hm = "0" + hm;
                    }
                    if(times == 0) {
                        alert("游戏结束");
                        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;
                font-family: "微软雅黑";
            }
            .warp strong{
                width: 100px;
                display: inline-block;
                text-align: center;
                font-family: georgia;
                color: #C9302C;
            }
        </style>
    </head>
    <body>
    <div class="warp">
        <strong class="a">111</strong>秒 <strong class="b"></strong>毫秒</div>
    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    </div>
    </body>
    </html>

    592bb14254b4fce0e908670882c9012.png

    【相关文章推荐】

    JS实现倒计时(天数、时、分、秒)

    2种简单的js倒计时实现方法

    js 高效率服务器时间同步倒计时

    限时抢购倒计时功能实现方法

    以上就是js怎么实现倒计时的功能?(精准到毫秒)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:js实现倒计时
    上一篇:js如何实现点击按钮出现隐藏和显示效果? 下一篇:【Javascript】zepto源码Callback分析
    大前端线上培训班

    相关文章推荐

    • 什么是Angular cli?怎么使用?• 浅谈Nodejs中Buffer模块的用法,看看如何编解码二进制数据包• javascript怎么改变元素宽高• Node.js中什么是RPC通信?和Ajax有啥区别?• javascript怎么求1到100的和

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网