js制作简易秒表效果详细讲解、开始、暂停与结束（定时器制作和时间戳制作）

首先，css和html

   <section>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="mill"></div>
    </section>
    <button class="start">开始</button>
    <button class="stop">暂停</button>
    <button class="over">结束</button>

   div {
            width: 100px;
            height: 50px;
            font-size: 40px;
            border: 1px solid red;
            float: left;
            line-height: 50px;
            text-align: center;
        }

js代码

        //获取元素
        var minutes = document.querySelector('.minute')
        var seconds = document.querySelector('.second')
        var mills = document.querySelector('.mill')
        var stop = document.querySelector('.stop')
        var div = document.querySelector('div')
        var over = document.querySelector('.over')
        var start = document.querySelector('.start')
        //在全局变量中设置分、秒、和毫秒、还有定时器，方便后边做清除
        var timer = null
        var mill = 0
        var s = 0
        var m = 0
        //点击开始按钮
        start.addEventListener('click', function () {
            //创建定时器之前先清除一下定时器，以免重复按开始按钮导致定时器过多，速度过快
            clearInterval(timer)
            //创建定时器
            timer = setInterval(function () {
                //毫秒每次加一
                mill += 1
                //当毫秒加到250的时候进行判断
                if (mill === 250) {
                  //加到250是，毫秒数恢复为0，秒数加一
                    mill = 0
                    s += 1
                    //判断当秒数加到60的时候
                    if (s === 60) {
                    //秒数恢复为0，分钟加一
                        s = 0
                        m += 1
                    }
                }
                //将所加的毫秒、分钟、秒都加到div中
                minutes.innerHTML = m
                seconds.innerHTML = s
                mills.innerHTML = mill
            })

        })
        //按下停止按钮，停止定时器，但是里面是的数值并不会恢复为0
        //停止按钮
        stop.addEventListener('click', function () {
            clearInterval(timer)
        })
        //按下清空按钮，停止定时器，让所有的数为零，并将div中的数字清空
        //清空按钮
        over.addEventListener('click', function () {
            clearInterval(timer)
            mill = 0
            s = 0
            m = 0
            minutes.innerHTML = m
            seconds.innerHTML = s
            mills.innerHTML = mill
        })

此外，我们还可以利用事件戳制作秒表，事件戳制作会更精准，

先获取事件戳（这个事件戳会一直随着事件走而走）

然后创建点击事件，获取点击时候的时间戳，（这个事件戳就是点击时候的时间，不会发生改变）

然后利用先获取的时间戳减去点击的时间戳，得到开始的事件。

js代码如下（html和css样式跟上面相同）

        //获取样式
        var minutes = document.querySelector('.minute')
        var seconds = document.querySelector('.second')
        var mills = document.querySelector('.mill')
        var stop = document.querySelector('.stop')
        var div = document.querySelector('div')
        var over = document.querySelector('.over')
        var start = document.querySelector('.start')
        //创建初始的时间戳、定时器
        var newTime = new Date().getTime()
        var timer = null
        var now ;
        //点击事件
        start.addEventListener('click', function () {
            //开始定时器
            timer = setInterval(function () {
                //获取点击时的时间戳
                now = +new Date
                //两个时间戳想减，得到相差的时间，就是点击后秒表的时间
                var timers = now - newTime
                //进行取证，取模，得到分和秒
                var minute = parseInt(timers / 1000 / 60 % 60)
                //如果小于10，在前面加上0，（美观）
                var minute = minute < 10 ? '0' + minute : minute
                var second = parseInt(timers / 1000 % 60)
                //如果小于10，在前面加上0，（美观）
                var second = second < 10 ? '0' + second : second
                var mill = parseInt(timers % 250)
                //将时间添加到div中
                minutes.innerHTML = minute
                seconds.innerHTML = second
                mills.innerHTML = mill
            }, 20)
        })
        //停止按钮
        stop.addEventListener('click', function () {
            clearInterval(timer)
        })
     

如发现问题欢迎留言！！！（你我都在加强的路上）