Js实现简单的秒表

最新推荐文章于 2023-11-01 13:47:56 发布

SSSkyCong

最新推荐文章于 2023-11-01 13:47:56 发布

阅读量5.8k

点赞数 8

分类专栏： H5 学习-总结-转载 Js

本文链接：https://blog.csdn.net/qlwangcong518/article/details/85055389

版权

学习-总结-转载同时被 3 个专栏收录

136 篇文章 0 订阅

订阅专栏

127 篇文章 2 订阅

订阅专栏

111 篇文章 1 订阅

订阅专栏

描述：

实现一个简单的秒表，点击启动按钮时开始计时，随后启动按钮变为暂停，

点击暂停暂停计时，点击复位回到最初始状态。

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #showTime
        {
            width: 300px;
            height: 60px;
            font-size: 60px;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div>
        <div id="showTime">00:00:00</div>
        <button id="startBn">启动</button>
        <button id="restBn">复位</button>
    </div>
<script>
    //——————
    var time,showTime,startBn,restBn,pauseDate;
    //布尔开关
    var bool=false;
    //暂停的累计时间
    var pauseTime=0;

    init();
    function init() {
        showTime=document.getElementById("showTime");
        startBn=document.getElementById("startBn");
        restBn=document.getElementById("restBn");
        startBn.addEventListener("click",clickHandler);//开始按钮 ~ 暂停按钮
        restBn.addEventListener("click",clickHandler);//复位按钮
        setInterval(animation,16);
    }

    //转化时间函数
    function animation() {
        if(!bool) return;
        //前时间减去上次开启时间减去暂停累计时间
        var times=new Date().getTime()-time-pauseTime;
        var minutes=Math.floor(times/60000);//毫秒转化为分钟
        var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟 
        将time减去分钟 除去1000得出 秒
        var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//
        showTime.innerHTML=
            (minutes<10 ? "0" +minutes : minutes)+":"
         +(seconds<10 ? "0"+seconds :seconds)+":"
        +(ms<10 ? "0"+ms : ms);
    }

    //点击时的事件
    function clickHandler(e) {
        e= e || window.event;
       if(this===startBn){
           bool=!bool;
           if(bool){
               this.innerHTML="暂停";
               //如果我们上一次暂停时间是空，表示没有暂停过，因此，直接返回0
               //如果上次的暂停时间是有值得，用当前毫秒数减去上次的毫秒数，这样就会得到暂停时间
               pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate);
              if(time) return;
               time=new Date().getTime();
               return;//是为bool判断跳出
           }

           this.innerHTML="启动";
           pauseDate=new Date().getTime();
           return;//是为this是否等于startBn判断跳出
       }
        startBn.innerHTML="启动";
        pauseTime=0;
        pauseDate=null;
        bool=false;
        time=0;
        showTime.innerHTML="00:00:00";
    }

</script>
</body>
</html>

SSSkyCong

关注

8
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
Js实现简单的秒表

描述：实现一个简单的秒表，点击启动按钮时开始计时，随后启动按钮变为暂停，点击暂停暂停计时，点击复位回到最初始状态。效果：代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&
复制链接

扫一扫