<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#clock{
border: 1px solid red;
width:200px;
text-align: center;
font-size:20px;
height:30px;
line-height: 30px;
}
</style>
<script>
//启动定时器时,会返回启动定时器的id,关闭定时器时,需要该id
var id;
function start(){
if(id){
return;
}
id=setInterval(function(){
//获取当前客户端时间
var d = new Date();
//获取本地格式时间
var now = d.toLocaleTimeString();
//将时间写入显示框
var p = document.getElementById("clock");
p.innerHTML = now;
}, 1000);
}
function stop(){
//id非空时定时器才有效,此时停止才有效,
//赋值为null是为下次启动做准备
if(id){
clearInterval(id);
id = null;
}
}
</script>
</head>
<body>
<p>
<input type="button" value="开始" οnclick="start();"/>
<input type="button" value="结束" οnclick="stop();"/>
</p>
<p id="clock"></p>
</body>
</html>