setInterval与clearInervar实现秒表功能

简介: setInterval与clearInervar实现秒表功能

setInterval与clearInervar


实现秒表功能

<button class="start">开始</button>
  <button class="stop">暂停</button>
  <button class="end">结束</button>
  <h1 class="time">10:9</h1>
  <script>
    let start = document.querySelector('.start')
    let stop = document.querySelector('.stop')
    let end = document.querySelector('.end')
    let time = document.querySelector('.time')
    let seconds = 0
    let ms = 0
    time.innerHTML = `${seconds}:${ms}`
    let timer = null
    // 开启计时器
    start.onclick = function () {
      // 开始的时候删掉之前的计时器并重新开启一个计时器 防止多次开启计时器越来越快的情况
      clearInterval(timer)
      timer = setInterval(() => {
        // 设置进制
        if (ms === 9) {
          seconds++
          ms = 0
        }
        ms++
        time.innerHTML = `${seconds}:${ms}`
      }, 100)
    }
    // 暂停计时器
    stop.onclick = function () {
      clearInterval(timer)
    }
    // 结束计时器
    end.onclick = function () {
      seconds = 0
      ms = 0
      time.innerHTML = `${seconds}:${ms}`
    }
  </script>
相关文章
|
3月前
|
前端开发 JavaScript API
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
|
9月前
|
JavaScript 前端开发
JavaScript 简易的秒表计时器
JavaScript 简易的秒表计时器
74 0
|
7月前
setInterval 如何让它暂停
setInterval 如何让它暂停
Qt一句话做一个单次倒计时定时器
Qt一句话做一个单次倒计时定时器
|
10月前
|
运维 JavaScript 前端开发
brython | timer 计时器
brython | timer 计时器
54 1
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
249 0
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
16、计时器方法2(setTimeout、clearTimeout、防抖、节流)
16、计时器方法2(setTimeout、clearTimeout、防抖、节流)
94 0
15、计时器方法1(setInterval、clearInterval)
15、计时器方法1(setInterval、clearInterval)
104 0
|
JavaScript
BOM 定时器:setTimeout和setInterval
BOM 定时器:setTimeout和setInterval
157 0
实现计时器和倒计时工具(Unity3D)
今天分享一下如何基于Unity3D做计时器工具,为了方便演示,使用了UGUI的Text,代码简单具有拓展性,然后有什么错误或者意见也欢迎大家给我提出来。微信二维码已经显示在博客主页,有想要沟通学习的,项目外包的都可以加一下。 分享一下我另一篇关于时间计时的文章: 【Unity3D】获取到游戏时间,并显示出来