4.利用计时器制作秒表

最新推荐文章于 2023-05-03 18:05:43 发布

大狗爱吃肉

最新推荐文章于 2023-05-03 18:05:43 发布

阅读量533

点赞数

分类专栏：前端案例以及问题解决方法文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_45666185/article/details/122483622

版权

这篇博客介绍了如何利用JavaScript在前端HTML中制作秒表。首先获取页面上的标签对象，然后定义变量存储时间，并设置全局变量time来记录定时器ID。接着为开始、暂停和重置按钮绑定功能函数。特别地，为了防止连续点击开始按钮导致计时加速，作者创建了一个独立的fun函数，通过if语句控制，只有当res为true时才启动定时器，否则停止执行后续操作。

摘要由CSDN通过智能技术生成

1.首先获取标签对象.

2.定义变量存储时间.

3.定义全局变量 time存储定时器序号编号

4.分别给三个按钮绑定对应的功能函数.

5.独立写一个fun函数,里面用if语句来防止多次点击开始按钮出现s累加速度加快的问题.

第一次点击开始 res 中存储原始值true

if语句执行 res = false ; 正常执行之后的程序

正常触发生成一个定时器

第二次点击开始 res 中存储赋值数据false

if语句执行 return 终止之后程序的执行

也就是不会触发生成新的定时器

<div>00:00:00</div>
    <button>开始</button>
    <button>停止</button>
    <button>重置</button>
<script>
        var oDiv = document.querySelector('div');
        var oBtnStart = document.querySelectorAll('button')[0];
        var oBtnStop = document.querySelectorAll('button')[1];
        var oBtnReset = document.querySelectorAll('button')[2];
        var s = 0;
        var m = 0;
        var h = 0;
        var time = 0;
        var res = true;
        oBtnStart.addEventListener(&