初级的秒表实现

最新推荐文章于 2024-09-16 08:47:17 发布

千叶万灵

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量116

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/chibamanrin/article/details/109003435

版权

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用简单的字符串计算及Interval系列函数实现一个初级的秒表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="开始倒计时" onclick="startTimeing()"/>
		<h1 id="hh"></h1>
	</body>
</html>
<script type="text/javascript">
	//定义小时、分钟、秒数变量
	var hour;
	var minute;
	var second;
	var h1 = document.getElementById("hh");
	var flag;			//Interval变量
	
	function startTimeing(){
		//初始值的设置，可进一步优化为表单输入
		hour = prompt("请设置小时数：");
		minute = prompt("请设置分钟数：");
		second = prompt("请设置秒数：");
		if(hour ==  ''){
			hour = "00";
		}
		if(minute == '' || minute > 59){
			minute = "00";
		}
		if(second == '' || second > 59){
			second = "00";
		}
		formatTime();
		
		//显示初始时间，调用func函数开始倒计时
		h1.innerHTML = hour + ":" + minute + ":" + second;
		flag = setInterval(func, 1000);
	}
	
	function func(){
		//对三个变量进行边界判断并实现秒表计数
		if(hour == 0 && minute == 0 && second == 0){
			clearInterval(flag);
			alert("计时结束");
			return;
		}
		else if(minute == 0 && second == 0){
			hour = hour - 1;
			minute = 59;
			second = 59;
		}
		else if(second == 0){
			minute = minute - 1;
			second = 59;
		}else{
			second = second - 1;
		}

		formatTime();
		
		h1.innerHTML = hour + ":" + minute + ":" + second;
		
		//追加判断是否为0，避免结束时多计算一秒
		if(hour == 0 && minute == 0 && second == 0){
			clearInterval(flag);
			alert("计时结束");
			return;
		}
	}
	
	//格式化时间函数
	function formatTime(){
		hour = hour.toString();
		minute = minute.toString();
		second = second.toString();
		
		if(hour.length == 1){
				hour = "0" + hour;
		}
		if(minute.length == 1){
				minute ="0" + minute;
		}
		if(second.length == 1){
				second = "0" + second;
		}
	}
</script>