秒表

最新推荐文章于 2024-06-21 15:15:29 发布

qq_38051208

最新推荐文章于 2024-06-21 15:15:29 发布

阅读量184

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_38051208/article/details/99999471

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<body>
<div id="div1">
<div id="count">
	<span id="id_H">00</span>:
	<span id="id_M">00</span>:
	<span id="id_S">00</span>
	</div>
	<input id="start" type="button" value="开始" /><br/>
	<input id="pause" type="button" value="暂停" /><br/>
	<input id="stop" type="button" value="停止" />
</div>



<style type="text/css">
#div1{height:380px; width: 280px; text-align: center; border: 1px solid #000; border-                            width: medium;margin: auto;
	   background-color:#21C7EE; }
	    #count span{
		width: 200px;
		height: 150px;
		line-height: 150px;
		margin: auto;
		font-size: 40px;
	}
	#div1 input{width: 150px; height: 40px; background-color:yellow; font-size: 25px; margin-top: 20px}
</style>


<script type="text/javascript">
window.onload = function(){
	                                     //可以将查找标签节点的操作进行简化
	function $(id){
		return document.getElementById(id);
	}
	                                      //点击开始计数
	var  count = 0;            //开始计数以后累加的总秒数
	var timer = null;           //设定一个定时器
	$("start").onclick = function(){
		timer= setInterval(function(){
		count++;
		                     //需要改变当前页面上时分秒的值。
		$("id_S").innerHTML = showNum(count % 60);
		$("id_M").innerHTML =showNum(parseInt(count / 60) % 60);
		$("id_H").innerHTML = showNum(parseInt(count / 3600));
		} , 1000);
			}
	  $("pause").onclick = function(){
		                                              //取消定时器
	  clearInterval(timer);
	}
	                             //停止 停止计数，对数据清零 1.数据清零  2.页面展示数据清零
	$("stop").onclick = function(){
	                         	              //取消定时器
		clearInterval(timer);
		                                    //1.将数据清零  总秒数清零
		count = 0;
		                             //2.将当前页面展示的数据清零
		$("id_S").innerHTML = "00";
		$("id_M").innerHTML = "00";
		$("id_H").innerHTML = "00";
	}
 function showNum(num){
	if(num < 10){
		return "0" + num; 
	}else{
		return num;
	}
}
</script>