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>
相关文章
|
5月前
|
前端开发 JavaScript
前端基础(十三)_定时器(间歇定时器、延迟定时器)
本文介绍了JavaScript中定时器的使用,包括`setTimeout`和`setInterval`两种类型。`setTimeout`是实现延迟执行,即等待一定时间后执行一次指定的函数;而`setInterval`是实现间歇执行,即每隔一定时间就执行一次指定的函数。文章还介绍了如何使用`clearTimeout`和`clearInterval`来取消定时器的执行,并通过示例代码展示了定时器的创建和取消。
188 4
前端基础(十三)_定时器(间歇定时器、延迟定时器)
|
7月前
|
存储 前端开发 JavaScript
前端如何优雅的使用定时器?
前端如何优雅的使用定时器?
68 1
|
JavaScript 前端开发
JavaScript 简易的秒表计时器
JavaScript 简易的秒表计时器
124 0
|
9月前
|
JavaScript 前端开发
JS实现可以控制的定时器,setInterval,clearInterval
JS实现可以控制的定时器,setInterval,clearInterval
56 0
|
9月前
|
前端开发 JavaScript API
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
135 0
|
运维 JavaScript 前端开发
brython | timer 计时器
brython | timer 计时器
96 1
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
335 0
手写系列 # 2:利用 requestAnimationFrame 实现 setInterval 计时器
蓝桥杯使用定时器代替延时控制按键
蓝桥杯使用定时器代替延时控制按键
89 0