HTML+Javascript实现一个秒表

最新推荐文章于 2023-11-30 16:55:10 发布

高自期许

最新推荐文章于 2023-11-30 16:55:10 发布

阅读量792

点赞数 1

分类专栏：项目开发文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_44014982/article/details/130778975

版权

项目开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

stopwatch.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Timer</title>
  </head>
  <body>
    <h1 id="time">0</h1>
    <button id="start">Start</button> 
    <button id="stop">Stop</button>
	<script src="timer.js"></script>
  </body>
</html>

timer.js

const startBtn = document.getElementById('start')
const stopBtn = document.getElementById('stop')
let seconds = 0
let interval = null

startBtn.addEventListener('click', () => {
  interval = setInterval(() => {
    seconds++
    document.getElementById('time').innerHTML = seconds
  }, 1000)  
})

stopBtn.addEventListener('click', () => {
  clearInterval(interval)
  interval = null
})

这个JavaScript代码做以下事情:

定义了startBtn和stopBtn作为开始和停止按钮的元素
定义了seconds计数秒数和interval为setInterval的返回值
为startBtn添加点击事件,当点击时:
- 开始每秒调用一次setInterval来增加seconds的值
- 每秒更新#time元素显示seconds的值
为stopBtn添加点击事件,当点击时:
- 使用clearInterval停止interval计时器
- 将interval设置为null以停止点击startBtn时创建新的计时器
  所以,这个简单的页面实现了一个基本的开始/停止计时器。