原生js实现秒表

秒表最核心的功能是计时。每个人的手机上都有秒表功能，打开手机就可以看到。我们可以看看手机上的秒表是怎么样的。

手机上的秒表有分钟和秒，有一个开始按钮，点击开始按钮，秒表就开始计时，当秒走到59的时候，分钟加1，秒归零。

下面是实现这个功能的代码。

<html>
    <head>
        <title>秒表</title>
        <meta charset="utf-8">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #container{
                width:200px;
                height: 180px;
                background: #ccc;
                text-align: center;
                margin: 100px auto;
                padding-top: 20px;
            }
            #container button{
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        
        <div id="container">
            <p id="time">00:00</p>
            <button id="start">开始</button>
        </div>

        <script>
            
            //我需要两个变量来分别存储秒数和分钟数
            var second = 0;
            var minute = 0;
            //然后需要一个变量来存储我的定时器
            var int;

            function timer(){  //声明一个timer函数，在这个函数里实现我的功能。
                second += 1;  //秒数加1
                if(second > 59){
                    second = 0;  //当秒数大于59的时候，让秒数重新归零。
                    minute += 1;  //分钟数加1
                }
                //然后将秒和分钟追加到dom里，为了保持00:00这样的格式，我们需要做一些简单的判断
                if(minute < 10){
                    document.getElementById('time').innerHTML = '0' + minute + ":0" + second;
                    if(second < 10){
                        document.getElementById('time').innerHTML = '0' + minute + ":0" + second;
                    }else{
                        document.getElementById('time').innerHTML = '0' + minute + ":" + second;
                    }
                }else{
                    document.getElementById('time').innerHTML = minute + ":0" + second;
                    if(second < 10){
                        document.getElementById('time').innerHTML = minute + ":0" + second;
                    }else{
                        document.getElementById('time').innerHTML = minute + ":" + second;
                    }
                }
            }

            //然后我创建一个定时器来执行timer函数，在js中，1000毫秒等于1秒。我可以让这个定时器每隔1000毫秒执行一次timer函数。我想要的效果是点击开始按钮的时候再执行这个定时器。
            //我可以把这个定时器放在一个函数里，在我点击开始按钮的时候运行这个函数即可。
            function start(){
                //在每次点击开始按钮时，我们需要先清除一下定时器，然后再执行定时器，原因是如果不清除，每次点击开始按钮，定时器都会累加，会导致计时越来越快的bug
                clearInterval(int);
                int = setInterval(timer,1000);
            }

            var startBtn = document.getElementById('start');
            startBtn.onclick = function(){
                start();
            }

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

View Code

这样，一个简单的秒表计时功能就实现了。

当然，这里实现的只是一个秒表最最简单最最基础的功能。一个好的秒表还需要能够暂停、能够重置、能够计次。在接下来我会把这些功能一点一点加上去。

秒客网

原生js实现秒表

相关文章