前提：先将jquery文件引入

        下载地址：jQuery

<!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>

# javascript # html # jquery
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

程序员学 AI（八）：AI Agent 到底是什么？从回答问题到完成任务

avatar AI Agent技术社区
cover

22道AI Agent 工程师必会的面试题，别啥都不会就出去找工作

avatar AI Agent技术社区

写给 TypeScript 工程师的 OpenClaw.NET 上手指南：用你熟悉的 TS 思维，跑起一个生产级 AI Agent

读代码层：TS 和 C# 本来就是「远房亲戚」——asyncawait??、接口、泛型、严格空检查，你的心智模型几乎无缝平移。真正要适应的只有两件事：类型是具名而非结构化的（多一句显式声明），以及 NativeAOT 下的「禁反射」约束。写扩展层：你甚至可以不怎么碰 C#——Node.js 插件桥意味着你的 TypeScript 插件就是一等公民，而且能在生产 aot 车道跑。内核给你 .NET

avatar AI Agent技术社区