JavaScript初学——秒表的实现

最新推荐文章于 2022-02-05 23:48:10 发布

小小帕金森

最新推荐文章于 2022-02-05 23:48:10 发布

阅读量783

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_40615146/article/details/86624784

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个毫秒级精度的秒表实现方法，通过HTML和JavaScript编程，实现了计时、暂停、重置等功能，适用于网页应用中的计时需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该秒表功能精确至毫秒，顺带相当于完成之前完成的界面其中一个功能（该秒表并没有使用css布局），具体代码如下：

<body>
<div id="con2">
                <!-- 制作一个秒表/计时器 -->
                <h3 id="mytime">计时器</h3>
                <button id="stop" onclick="stop()">暂停</button>
                <button id="start" onclick="start()">开始</button>
                <button id="reset" onclick="reset()">重置</button>
            </div>
        </div>
    </div>
    <script>
        //计时器的功能
        //var h,m,s,ms=0;//这样定义会让h、m、s无法被第一时间识别
        var h=0;
        var m=0;
        var s=0;
        var ms=0;
        //定义时，分，秒，毫秒并初始化为0；
        var time=0;
    
        function timer(){   //定义计时函数
            ms=ms+50;         //毫秒
            if(ms>=1000){
            ms=0;
            s=s+1;         //秒
            }
            if(s>=60){
            s=0;
            m=m+1;        //分钟
            }
            if(m>=60){
            m=0;
            h=h+1;        //小时
            }
            str =toDub(h)+":"+toDub(m)+":"+toDub(s)+":"+toDubms(ms);
            mytime = document.getElementById('mytime');
            mytime.innerHTML = str;
        }
        
        function reset(){  //重置
            clearInterval(time);
            h=m=s=ms=0;
            document.getElementById('mytime').innerHTML="00:00:00:0000";
        }
        
        function start(){  //开始
            time=setInterval(timer,50);
        }
        
        function stop(){  //暂停
            clearInterval(time);
        }
        //补零
        function toDub(i){  
            if(i<10){
            i="0"+i;
            }
            else {
            i=i;
            }
            return i;
        }
        function toDubms(i){
            if(i<10){
            i="00"+i;
            }
            else {
            i=i;
            }
            return i;
        }
   </script>
</body>

以下为效果图：
在这里插入图片描述