JavaScript实现计时器，一个按钮实现开始和停止的功能

最新推荐文章于 2022-07-14 19:40:13 发布
最新推荐文章于 2022-07-14 19:40:13 发布
阅读量1.3w 收藏 7
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31187881/article/details/79247489
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var intervalId;
var i = 0;
var count=0;
function startTime(){
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var ms = document.getElementById("ms");
var buttonEle = document.getElementById("start");


if(i%2==0){
buttonEle.innerHTML="暂停计时";
intervalId = setInterval(function(){
count += 1;
var thehour=parseInt(count/360000);
var theminute=parseInt(count/6000%60);
var thesecond=parseInt(count/100%60);
var thems = parseInt(count%100);

if(thehour>=10){
hour.innerHTML=thehour+" ";
}
else{
hour.innerHTML="0"+thehour+" ";
}

if(theminute>=10){
minute.innerHTML=theminute+" ";
}
else{
minute.innerHTML="0"+theminute+" ";
}

if(thesecond>=10){
second.innerHTML=thesecond+" ";
}
else{
second.innerHTML="0"+thesecond+"  ";
}
if(thems>=10){
ms.innerHTML=thems+"&nbsp;";
}
else{
ms.innerHTML="0"+thems+"&nbsp;";
}
},10)
}
else{
buttonEle.innerHTML="开始计时";
clearInterval(intervalId);
}
i++;
}
</script>
<style type="text/css">
body,html{
background: violet;
/*position: relative;*/
}
#firstDiv{
height: 50%;
width:50% ;
position:absolute;
margin-left: 350px;
margin-top:150px;
background: #ffcccc;
}
#twoDiv{
height: 200px;
width:100%;
position: absolute;
margin-top: 130px;
margin-left: 130px;;
}
span{
font-size: 30px;
}
button{
font-size: 20px;
}
</style>
</head>
<body>
<div id="firstDiv">
<div id="twoDiv">
<span><span id="hour">00&nbsp;</span>时</span>
<span><span id="minute">00&nbsp;</span>分</span>
<span><span id="second">00&nbsp;</span>秒</span>
<span><span id="ms">00&nbsp;</span>毫秒</span>

<button id="start" οnclick="startTime()">开始计时</button>
</div>
</div>
</body>
</html>
左边Luckyboy
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JS实现按钮控制计时开始和停止功能
12-29
下面给大家分享一段实例代码关于JS实现按钮控制计时开始和停止功能，具体代码如下所示： <span xss=removed><body> 小闹钟: <span id=nz></span> <input type=button value=开始计时 onclick=nzbg(this)> <input type=button value=结束计时 onclick=nzbg(this)> [removed] function nzbg(obj) { var a = document
用js做一个简单数字时钟（可点击停止）
蓝鸟的博客
03-22 5666
我是demo啊 function timeMsg() { var myDate=new Date(); var h=myDate.getHours(); var m=myDate.getMinutes(); var s=myDate.getSeconds(); var t=h+":"+m+":"+s; document.getElementById("p1").
js倒计时器可自定义时间和暂停
weixin_39168678的博客
02-06 3949
js倒计时器可自定义时间和暂停，效果如下，点击start 开始计时，end结束计时 分别复制 H5 css js 代码即可实现，具体的算法在js控制函数中（都写了注释） css html,body{ width:100%;height:100%; } .content{ height:100%;width:100%; } .row-center{ display:flex;flex-
js计时器(开始计时、停止计时、重置)
宏伟
06-28 7398
00 00 00
javascript实现秒表计时器的制作方法
10-20
以上就是使用JavaScript实现秒表计时器的基本原理和代码实现，通过理解这些知识点，你可以根据需要创建自己的计时器功能。在实际应用中，可能还需要考虑其他因素，如用户交互、时间精度调整等。
javascript 秒表计时器实现代码
11-30
这个实例展示了如何使用 JavaScript 来创建一个简单的秒表，包括开始、暂停和重置功能。下面我们将深入探讨实现这一功能的关键代码部分，并解释其工作原理。 首先，HTML 部分创建了一个输入框来显示计时器的值（"00...
javascript实现一款好看的秒表计时器
12-28
本文实例为大家分享了javascript实现秒表计时的具体代码，供大家参考，具体内容如下 实现图片： 分+秒+跑秒 时+分+秒+跑秒 需求分析： 1、显示整个秒表页面； 2、在点击“开始”按钮之后，开始计时，并将按钮转为...
javascript计时器编写过程与实现方法
10-22
在本文中，我们将深入探讨JavaScript计时器的编写过程和实现方法。 首先，计时器的基本功能包括： 1. 在页面上实时显示时间。 2. 每秒钟更新，秒数满60后进位到分钟，分钟满60后进位到小时。 3. 支持重置，即重新...
js实现计时器秒表功能
10-15
本教程将详细讲解如何使用JavaScript来实现一个基本的计时器和秒表功能。 首先，我们需要了解JavaScript中的定时器。`setInterval()`函数是JavaScript提供的一个定时器，它可以按照指定的时间间隔重复执行一个函数...
js如何实现定时器的开启和关闭
HEConfidence的博客
04-20 8680
我们在使用定时器的时候，可能需要对一个定时器进行多次开启和关闭，那么，如何才能有效控制定时器呢？ //定义一个函数 var update = function (){ console.log("这是一个定时器"); } var time1 = setInterval(update,2000); //关闭定时器 clearInterval(time1); //再次开启定时器 time1 = setInterval(update,3000); 后面的time1不需要写var，不然相当于重新定义
JavaScript 编码练习：利用一个按钮实现开始计时和停止计时
kllo__的博客
02-23 2769
问题描述 页面上有一个按钮，点击按钮开始计时，页面上显示经过了多少时间，再次点击计时停止。 页面显示如下： <html> <head> </head> <body> <button id="start">Start</button> <p><span id="counter">0</span> elapsed second(s)</...
JS--开启和停止定时器
weixin_54250982的博客
06-22 4730
开启和停止定时器
JavaScript编写一个计时器，包含三个模式（开始、停止、复原），由同一个按钮控制操作
qq_46267291的博客
05-06 1115
JavaScript编写一个计时器，包含三个模式（开始、停止、复原），由同一个按钮控制操作 （我也是新手，学生一枚，自学，若有不足，请海涵并评论告知，谢谢） 新手教学 **思路：** HTML写出一个按钮（按钮的初始化）和时分秒（我这里用两个div分别包含按钮和时间） CSS进行布局，布置好按钮和时间显示的位置等 JS（重点）分别获取时间和按钮节点，用innerHTML修改时间和按钮里面的文字，对按钮绑定监听点击click事件，根据按钮里面不同的文字进行分别处理点击事件（开始、停止、复原...
通过js实现计时器
热门推荐
style1226yi的博客
07-14 1万+
通过js实现计时器
js实现随机点名（点击按钮开始与结束）
QAQTT的博客
07-19 2398
HTML结构 <style> .name { width: 400px; height: 300px; background-color: pink; margin: 100px auto 10px auto; color: #fff; font-size: 30px; line-height: 300px; text-align: center; }
【JS】定时器的开启与关闭
点滴记忆
07-10 3974
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
js计时器的启动与停止_PLC编程100例之电动机星－三角降压启动控制
weixin_30706851的博客
12-12 662
电动机星－三角降压启动控制降压启动主电路示意图PLC外部接线示意图【动作要求】Ÿ 三相交流异步电动机启动时电流较大，一般为额定电流的 5~7 倍。为了减小启动电流对电网的影响，采用星—三角形降压启动方式。Ÿ 星—三角形降压启动过程：合上开关后，电机启动接触器和星形降压方式启动接触器先启动。10 秒延时后，星形降压方式启动接触器断开，再经过 1 秒延时后将三角形正常运行接触器接通，电动机主电路接成三...
用js实现一个简单计时器功能
最新发布
05-15
好的，以下是一个简单的计时器功能的示例代码： ```html <!DOCTYPE html> <html> <head> <title>计时器</title> </head> <body> <h1 id="timer">0</h1> <button id="startBtn">开始</button> <button id="stopBtn">停止</button> <button id="resetBtn">重置</button> <script> var timer = document.getElementById("timer"); var startBtn = document.getElementById("startBtn"); var stopBtn = document.getElementById("stopBtn"); var resetBtn = document.getElementById("resetBtn"); var count = 0; var timerId; function startTimer() { timerId = setInterval(function() { count++; timer.innerText = count; }, 1000); } function stopTimer() { clearInterval(timerId); } function resetTimer() { count = 0; timer.innerText = count; clearInterval(timerId); } startBtn.addEventListener("click", startTimer); stopBtn.addEventListener("click", stopTimer); resetBtn.addEventListener("click", resetTimer); </script> </body> </html> ``` 这个示例代码使用了 JavaScript 来实现计时器功能。当点击“开始”按钮后，定时器会每秒钟自动加一，同时将计时器的数值更新到页面上。当点击“停止”按钮后，定时器会停止计时。当点击“重置”按钮后，计时器会将数值重置为 0，并停止计时。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值