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>
相关文章
|
JavaScript 前端开发
JavaScript 简易的秒表计时器
JavaScript 简易的秒表计时器
111 0
|
6月前
|
JavaScript 前端开发
JS实现可以控制的定时器,setInterval,clearInterval
JS实现可以控制的定时器,setInterval,clearInterval
45 0
|
6月前
|
前端开发 JavaScript API
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
116 0
|
小程序 前端开发 JavaScript
小程序计时器
小程序计时器
137 0
|
算法 Java 测试技术
精准计时工具:深入了解 Stopwatch(计时器)
在计算机编程领域中,精确计时是一个关键的需求,特别是在性能优化、算法分析等场景下。Stopwatch,作为一个用于测量时间间隔的工具,可以帮助开发者精确地计时代码的执行时间。在本文中,我们将详细介绍 Stopwatch 的特性、用法以及在实际应用中的优势。
622 0
|
运维 JavaScript 前端开发
brython | timer 计时器
brython | timer 计时器
87 1
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
316 0
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
15、计时器方法1(setInterval、clearInterval)
15、计时器方法1(setInterval、clearInterval)
143 0