<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" class="b1" >
<input type="button" value="开始" class="b2">
<input type="button" value="stop" class="b3">
</body>
<script>
// 获取到输入框
var b2Ele = document.getElementsByClassName("b2")[0];
var b1Ele=document.getElementsByClassName("b1")[0];
var b3Ele=document.getElementsByClassName("b3")[0];
var res = ''; //判断我们的计时器是否已经存在，未关闭
// 定时执行函数
var show_time = function(){
var cTime=new Date(); //创建一个时间对象，来产生一个当前的时间
b1Ele.value = cTime.toLocaleString();
};
//点击事件，触发开始计时
b2Ele.onclick = function(){
if (!res){
res = setInterval(show_time,1000); //setInterval设置一个以1000毫秒，来执行一次展示时间的函数
console.log(res)}else {
console.log("已清空");
}
};
//点击开始停止时间
b3Ele.onclick=function(){
clearInterval(res); //清空我们的计时器
res = false;
}
</script>
</html>