js秒表制作

最新推荐文章于 2022-04-09 20:59:51 发布

smileForward

最新推荐文章于 2022-04-09 20:59:51 发布

阅读量312

点赞数 1

分类专栏：案例文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/weixin_45000814/article/details/105179087

版权

案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

<!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>
   	<!--<div id="btns">-->
        <button name="start">开始</button>
        <button name="reset1">重置</button>
        <button name="continue1">继续</button>
    <!--</div>-->
    <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>

smileForward

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js秒表制作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
复制链接

扫一扫