js秒表制作

妖狐艹你老母 2023-07-18 15:30 16阅读 0赞

**效果图如下：**![在这里插入图片描述][20200329151800260.gif]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div id="time">00:00:000</div>
       	
            <button name="start">开始</button>
            <button name="reset1">重置</button>
            <button name="continue1">继续</button>
        
        <script> /* 秒表 开始按钮可以控制开始和停止 如果开始时计数点击重置会重新计数，此时开始按钮会变成停止按钮,，点击停止按钮停止计数，此时停止按钮又会变成开始按钮，但点击没用 此时计数需要点击继续按钮，点击继续按钮后，开始按钮就又变成停止按钮，点击就会停止计数 */ var timeDiv = document.querySelector("#time"); //事件委托时这个按钮父级需要加上，剩余的按钮除了开始按钮，都可以不用获取了 // var oBtns = document.querySelector("#btns"); var start = document.querySelector("[name='start']"); var reset1 = document.querySelector("[name='reset1']"); var continue1 = document.querySelector("[name='continue1']"); // 变量保存按钮，点击开始后再点击就没反应，也可以使用按钮的禁用功能 // start.disabled = true; 则表示不能再点击开始按钮了,按钮会变灰 var bool1 = true, bool2 = true; var min = 0, sec = 0, milliSecond = 0, timeId; function setStopwatch() { timeId = setInterval(timer, 50); } function timer() { milliSecond += 50; // console.log(milliSecond); if (milliSecond == 1000) { milliSecond = 0; sec++; sec = (sec < 10 ? "0" + sec : sec); } if (sec == 60) { min++; sec = 0; min = (min < 10 ? `0${ min}` : min); }; if (min == 60) { min = 0; }; if (min == 0) { timeDiv.innerHTML = `0${ min}:${ sec}:${ milliSecond}`; } else { timeDiv.innerHTML = `${ min}:${ sec}:${ milliSecond}`; } } start.onclick = function () { if (bool1 && bool2) { start.innerHTML = "停止"; bool1 = false; bool2 = false; setStopwatch(); } else { start.innerHTML = "开始"; bool1 = true; clearInterval(timeId); } } continue1.onclick = function () { if (!bool2) { setStopwatch(); bool1 = false; start.innerHTML = "停止"; } } reset1.onclick = function () { milliSecond = 0; sec = 0; min = 0; timeDiv.innerHTML = `0${ min}:0${ sec}:00${ milliSecond}`; } // 利用事件委托，需要给按钮加个父级， // oBtns.onclick = function (e) { // // 事件兼容 // e = e || window.event; // // 事件对象兼容 // var eTag = e.target || e.srcElement; // if (eTag.getAttribute("name") == "start") { // if (bool1 && bool2) { // eTag.innerHTML = "停止"; // bool1 = false; // bool2 = false; // setStopwatch(); // } // else { // eTag.innerHTML = "开始"; // bool1 = true; // clearInterval(timeId); // } // } // else if (eTag.getAttribute("name") == "reset1") { // milliSecond = 0; // sec = 0; // min = 0; // timeDiv.innerHTML = `0${min}:0${sec}:00${milliSecond}`; // } // else if (eTag.getAttribute("name") == "continue1") { // if (!bool2) { // setStopwatch(); // bool1 = false; // // 利用事件委托在这里要注意改变的对象不是点击的对象，所以开始按钮先获取一下，其他按钮可以不用获取 // start.innerHTML = "停止"; // } // } // } </script>
    </body>
    
    </html>

[20200329151800260.gif]: /images/20230528/139f8cda48d44b1abe305ae9a0cc819b.png