<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计时器事件</title>
</head>
<body>
<p id="clock"></p>
<script>
var clock = setInterval(function(){myClock()},1000 );
//第一个参数确定，调用的是什么方法，fanction表示调用的是方法，在中括号里面再调用想要实现的方法
//第二个方法，表示每隔多长时间调用一次
function myClock() {
var data = new Date();
var time = data.toLocaleTimeString();
// 将得到的事件对象，转换为字符串的类型
document.getElementById("clock").innerHTML = time;
//获取的时间的字符串，通过上面的p标签进行承载
}
</script>
<!--通过setInterval（）方法做出一个时钟-->
<button id="btnStop" onclick="delayStop()">停止</button>
<script>
function stopTime() {
clearInterval(clock);
}
</script>
<!--clearInterval()停止一个setInterval()方法，括号内是该一个方法的名字-->
<script>
function delayStop() {
setTimeout(function () {
stopTime()
},3000)
}
</script>
<!--setTimeout用法跟setInterval一样，这里stop时间延时3秒执行，通过clearTimeout可以清除
并且本方法可以递归，可以通过这一个方法完成时钟-->
</body>
</html>效果：
