结合Html、Javascript、Jquery做个简易的时间显示器

七号练习生.c2025-11-11 11:09
**前提：**先将jquery文件引入
下载地址：jQuery
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的计时器</title>
	</head>
	<body>
		<p id="p1">这是一个计时器</p>
		<div id="timeDisplay"></div>
		<button id="btn1" type="button">开始计时</button>
		<button id="btn2" type="button">计时暂停</button>
		<button id="btn3" type="button">计时清零</button>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var time = null;
		
		$("#btn1").bind("click",function(){
			/* 
			防止定时器资源重复累积
			   先检查变量time是否有值（即是否已经存在一个定时器）。
			   如果有，则清除现有的定时器（clearInterval(time)），然后再设置新的定时
			   这样做的目的是为了避免同时运行多个定时器（如果用户多次点击btn1，会导致多个定时器同时运行，
			   从而造成时间显示更新频率加快，甚至内存泄漏）
			 */
			if(time){
				clearInterval(time);
			}
			
			time = setInterval(function() {
				var date = new Date();
				$("#timeDisplay").text("当前时间是："+date.toLocaleString());
			}, 1000);
		});
		$("#btn2").on("click",function(){
			clearInterval(time);
			/* 如果我们不将time置为null，那么再次点击btn1时，if(time)就会判断为true
			（因为time是一个非null的值，即使这个定时器已经被清除），然后执行clearInterval */
			time = null;
		})
		$("#btn3").on("click",function(){
			clearInterval(time);
			time = null;
			$("#timeDisplay").text("");
		})
		
	</script>
</html>