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)         })      

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