小案例 — JS简易秒表

复习定时器，无聊着就做个小秒表看看`
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>秒表实现</title>
<style>
	.div1{
		height: 410px;
		width: 300px;
		margin: 20px auto;
		border:1px solid #000;
	}
	.count{
		height: 200px;
		line-height: 200px;
		width: 80%;
		margin: 10px auto;
		border: 1px solid #000;
		text-align: center;
		font-size: 20px;
	}
	input[type^="button"]{
		text-align:center;
		margin: 10px 0 10px 73px; 
		background: #099;
		cursor: pointer;
		height: 40px;
		width: 150px;
		color: #fff;
		font-family: "宋体";
	}

</style>
</head>

<body>
	<div class="div1">
    	<div class="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="开始" />
        <input id="pause" type="button" value="暂停" />
        <input id="stop" type="button" value="停止" />
    </div>

	<script>
		function $(id){
			return document.getElementById(id);
		}
	
    	window.onload = function(){
			//点击开始计数
			var count = 0; //开始计数以后累加的总秒数
			var timer = null;
			$('start').onclick = function(){
				if(this.value == '继续'){
					this.value = '开始';
				}
				timer = setInterval(function(){
					count++;
					//需要改变当前页面上 时分秒的值
					$('id_S').innerHTML = showNumber(count % 60);
					$('id_M').innerHTML = showNumber(parseInt(count/60) % 60);
					$('id_H').innerHTML = showNumber(parseInt(count/3600));
				},100);
			}
			
			//暂停
			$('pause').onclick = function(){
				//清除定时器
				clearInterval(timer);	
				$('start').value = '继续';	
			}
			
			//停止 停止计数，数据清零 —— （1）数据清零；（2）页面展示数据清零
			$('stop').onclick = function(){
				//取消定时器
				clearInterval(timer);
				//数据清零 —— 总秒数清零
				count = 0;
				//页面展示数据清零
				$('id_S').innerHTML = "00";
				$('id_M').innerHTML = "00";
				$('id_H').innerHTML = "00";	
			}
		}    
	    
		//处理单个数字显示
		function showNumber(num){
			if(num < 10){
				return '0' + num;
			}	
			else{
				return num;	
			}
		} 
    </script>

</body>
</html>
预览图（毫无特点毫无新意毫无可深究的地方…）
在这里插入图片描述
小案例 — JS简易秒表

猜你喜欢
