javascript实现秒表计时器的制作方法
更新时间：2017年02月16日 08:46:50 作者：lusizhifei
这篇文章主要为大家详细介绍了javascript实现秒表计时器的制作方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js秒表计时器的制作代码，供大家参考，具体内容如下
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>Document</title>
<style>
div{margin-top:40px;margin-left:25px;margin-bottom:10px;width:20px;height:20px;}
input{width:30px;height:30px;margin-left:20px;font-size:20px;color:#fff;background: #000;border:none;outline: none;}
</style>
</head>
<body>
<div></div>
<input type="button" value="开始" />
<input type="button" value="停止" />
</body>
<script type="text/javascript">
//2.实现秒表功能，实现时 分 秒 毫秒 点击1开始计时，2结束计时；
var oDiv=document.getElementsByTagName('div')[0];
var Btn1=document.getElementsByTagName('input')[0];
var Btn2=document.getElementsByTagName('input')[1];
var ms=0;
var sec=0;
var min=0;
var hour=0;
Btn1.onclick=function(){
timer=setInterval(function(){
var str_hour=hour;
var str_min=min;
var str_sec=sec;
if(hour<10){
str_hour="0"+hour;
}
if(min<10){
str_min="0"+min;
}
if(sec<10){
str_sec="0"+sec;
}
var time=str_hour+':'+str_min+':'+str_sec+':'+ms;
oDiv.innerHTML=time;
ms=ms+50;
if(ms>999){
ms=0;
sec++;
}
if(sec>59){
sec=0;
min++;
}
if(min>59){
min=0;
hour++;
}
},50)
}
Btn2.onclick=function(){
clearInterval(timer);
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了使用JavaScript实现时间格式的切割与转换的相关知识,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2024-04-04
Function是javascript里最常用的一个概念，javascript里的function是最容易入手的一个功能，但它也是javascript最难理解最难掌握的一个概念，接下来通过本篇文章给大家介绍javascript中的function多重理解，小伙伴们一起来学习吧2015-08-08
这篇文章主要给大家介绍了关于js中parseInt()诡异行为的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
因项目开发需要，须将每一个方法都独立成单独的js文件以便载入、维护，所以，必须需要有一个控制器用于载入这些方法。2010-07-07
这篇文章主要为大家详细介绍了微信小程序支付功能，分享了php后台对接完整代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
这篇文章主要给大家介绍了关于js异步接口并发数量控制的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
我们在学到js中数组的时候,我们会接触到js中数组的一些方法这些方法对我们来说,可以很便利的达到我们想要的结果,下面这篇文章主要给大家介绍了关于javascript中搜索数组的四种方法,需要的朋友可以参考下2022-12-12
用javascript操作xml...2006-11-11
这篇文章主要介绍了详解JS如何实现"上次操作未完成禁止新操作"的逻辑及思路,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
细说webpack源码之compile流程-rules参数处理技巧(2)
这篇文章主要介绍了webpack源码之compile流程-rules参数处理技巧的相关知识，需要的朋友参考下吧2017-12-12
最新评论