【JavaScript】如何用定时器在网页上实时显示系统时间？以及如何实现秒表功能？

1.什么是计时器？

用计时器可以让我们在指定的时间间隔内周期性地执行某段函数或代码

2.如何在网页实时显示系统时间（setInterval）？

目标元素（这里指html文档中需要进行DOM操作的元素）：

<p>时钟</p>

<input type="text" id="clock" />

<button id="stop" onclick="stopClock()">暂停</button>

<button id="reUse" onclick="reUseClock()">继续</button>

js代码：

//setInterval是js中的内置函数，用于创建定时器，周期性地执行其中的函数，
//需要传入两个参数，第一个参数是回调函数，第二个是时间间隔（单位ms）,在定时器销毁前会不断运行
let clockTimer =setInterval(function(){runClock()},1000)

function runClock(){

let clock=document.querySelector("#clock")//获取元素

let nowDate=new Date();//创建一个表示客户端当前系统日期和时间的Date对象，中国标准时间

let nowTime=nowDate.toLocaleTimeString();//使用 `toLocaleTimeString` 方法将当前时间格式化为本地化时间的字符串表示。

clock.value=nowTime//修改文本框中的值

}

//暂停时钟

function stopClock(){
//`clearInterval` 是JavaScript中的一个内置函数，用于清除由 `setInterval` 函数创建的定时器。
//当调用 `clearInterval` 并传入定时器的标识符作为参数时，定时器将会停止执行。
clearInterval(clockTimer)

clockTimer=null//设为空更绝对的清除

}

//重启时钟

function reUseClock(){

clockTimer =setInterval(function(){runClock()},1000)

}

效果演示：(哎视频发不了，下面的时间每一秒都会改变)

3.如何用setTimeout()实现秒表功能？

功能要求：实现三秒的计时功能，到计时到三秒时结束，并在文本框中显示“三秒倒计时结束”，点击开始计时按钮可以重新开始计时

目标元素：

<input type="text" id="watch"/>

<button onclick="startWatch()" >开始计时</button>

js代码：

//秒表(实现三秒倒计时)

startWatch=function(){//这种方式也可以创建函数

let watch=document.querySelector("#watch")//获取文本框元素

watch.value=""//将文本框中的文本清空

setTimeout(function(){//和setInterval不同，该方法只执行一次，而且是延迟执行其中的函数，第二参数就是延迟的时间

watch.value="三秒倒计时结束"

},3000)

}

效果演示：

应用：可以用在加载动画和遮罩，即你就算页面很快加载完了，加载动画也会延迟一小段时间才消失（可见性设为none），这样会留给用户一定的反应时间

比如：（下面用于检测网页文档是否加载完成）
 

//文档加载事件监测

document.onreadystatechange=function(){

let loading=document.querySelector("#loading")

if(document.readyState=="complete"){//判断当前文档是否加载完成

setTimeout(function(){//延迟3秒执行

loading.style.display = "none"//把加载动画样式设置为不可见，但不知道为什么这里样式属性修改不了（现在知道为什么了，我把display拼写成dispaly，我服了）

console.log("文档加载完成")

},3000)

}else{

console.log("正在加载")

loading.style.dispaly = "block"

}

}