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>
相关文章
|
8月前
|
图形学
|
3天前
|
前端开发 JavaScript API
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
|
10月前
|
JavaScript 前端开发
JavaScript 简易的秒表计时器
JavaScript 简易的秒表计时器
79 0
|
8月前
setInterval 如何让它暂停
setInterval 如何让它暂停
|
9月前
|
算法 Java 测试技术
精准计时工具:深入了解 Stopwatch(计时器)
在计算机编程领域中,精确计时是一个关键的需求,特别是在性能优化、算法分析等场景下。Stopwatch,作为一个用于测量时间间隔的工具,可以帮助开发者精确地计时代码的执行时间。在本文中,我们将详细介绍 Stopwatch 的特性、用法以及在实际应用中的优势。
377 0
Qt一句话做一个单次倒计时定时器
Qt一句话做一个单次倒计时定时器
|
11月前
|
运维 JavaScript 前端开发
brython | timer 计时器
brython | timer 计时器
60 1
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
249 0
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
15、计时器方法1(setInterval、clearInterval)
15、计时器方法1(setInterval、clearInterval)
105 0
16、计时器方法2(setTimeout、clearTimeout、防抖、节流)
16、计时器方法2(setTimeout、clearTimeout、防抖、节流)
95 0