JavaScript

超轻量级php框架startmvc

javascript 秒表计时器实现代码

更新时间:2020-04-28 22:18:01 作者:startmvc
javascript秒表计时器实例代码:<htmllang="en"><head><metacharset="UTF-8"><title>js计

javascript 秒表计时器

实例代码:


<html lang="en">
<head>
<meta charset="UTF-8">
<title>js计时器</title>
</head>
<body>
<input type="text" value="00:00">
<input type="button" value="开始">
<input type="button" value="结束">
<input type="button" value="重置">
<script>

 var oTxt=document.getElementsByTagName("input")[0];
 var oStart=document.getElementsByTagName("input")[1];
 var oStop=document.getElementsByTagName("input")[2];
 var oReset=document.getElementsByTagName("input")[3];
 var n= 0, timer=null;
 //开始计时
 oStart.onclick= function () {
 clearInterval(timer);
 timer=setInterval(function () {
 n++;
 var m=parseInt(n/60);
 var s=parseInt(n%60);
 oTxt.value=toDub(m)+":"+toDub(s);
 },1000/60);
 };
 //暂停并且清空计时器
 oStop.onclick= function () {
 clearInterval(timer);
 }
 //重置
 oReset.onclick= function () {
 oTxt.value="00:00";
 n=0;
 }
 //补零
 function toDub(n){
 return n<10?"0"+n:""+n;
 }
</script>
</body>
</html>

在计时器设置运行间隔那里,一开始设置了100,其实是不对的,因为 1秒=1000毫秒;我们要分成60个数字来显示,所以还是要除以60才对。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

javascript 秒表计时器 js 秒表计时器实例代码