结合Html、Javascript、Jquery做个简易的时间显示器
前提：先将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>