Javascript 计时器

在本文中，我们将深入开发基于 html、css 和 js 的计时器。首先，我们需要在本地文本编辑器中为每个项目创建一个项目文件夹和文件。

最终结果附在下面。

让我们从 ** 索引.html**

 <div class="title"><h1>定时器</h1></div> <div id="box"> <div id="timer-counter">00:00:00</div> <div class="wrap"> <button id="start" class="btn">开始</button> <button id="stop" class="btn">停止</button> <button id="reset" class="btn">重置</button> </div> </div>

完成 html 后，现在您可以开始使用 css 为 web 设置样式，它是可选的，因为我们将使用 js 来实现功能，但强烈建议包含 css 以使您的内容界面更好。

样式.css //随意使用内联/内部或外部样式

 身体{ 边距：0； 填充：0； 背景颜色：#ededc2； } 。标题{ 位置：绝对； 左：45%； 顶部：40px； 背景颜色：#d2eaff； 填充：3px 45px； 盒子阴影：5px 5px 5px 5px #D4FBB0; 边界半径：50%； } h1{ font-family: 'Roboto Slab' 衬线； 字体大小：2rem } #定时器计数器{ 位置：绝对； 底部：300px； 左：300px； 字体大小：2rem； } ＃盒子{ 位置：相对； 填充：70px 40px； 宽度：650 像素； 高度：250px； 边距顶部：180px； 左边距：410px； 背景颜色：#D4fBB0； 盒子阴影：5px 5px 5px 10px； } 。裹{ 位置：绝对； 左：200px； 顶部：150px； } .wrap：悬停{ 背景颜色：RGB（3,3,3）； 颜色：rgb(222, 209,209); } .btn{ 字体大小：2rem； font-family:'Times New Roman', serif; 边距：3px； 背景颜色：透明； 填充：8px 15px； 边框半径：10px； }

现在将开始处理功能以使计时器计数。确保在 js 文件中编写此代码，或者您也可以使用内部 js。

脚本.js

 var start = document.getElementById('start'); var stop = document.getElementById('stop'); var reset = document.getElementById('reset'); var counter = document.getElementById('timer-counter'); 让计时器 = 0; 让间隔； 函数 startCountDown(){ 计时器++； 秒=计时器； newDates = new Date((秒*10000)/1000); 分钟 = newDates.getMinutes(); 秒 = newDates.getSeconds(); 毫秒 = newDates.getMilliseconds(); display = minutes.toString().padStart("2",0)+":"+seconds.toString().padStart("2",0)+":"+(毫秒/10).toString()。 pathStart("2",0); counter.innerText = 显示； } 函数播放定时器（）{ 清除间隔（间隔） 间隔 = setInterval(() => { 开始倒计时（） }, 10); } 函数停止定时器（）{ 清除间隔（间隔）； } 函数重置定时器（）{ 清除间隔（间隔）； counter.innerText="00:00:00"; 计时器 = 0; } //添加 eventListener 以便定时器在按下 btn 时工作。 start.addEventListener("点击", playTimer); stop.addEventListener("点击", stopTimer); reset.addEventListener("点击", resetTimer);

记住要有创意才能理解它是如何工作的，你不必跟随一切，随心所欲地制作它，你可以在下面的评论或任何编程中分享最终结果社区论坛。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/5878/13330100