<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>时钟</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
#li{
width:120px;
height:20px;
border:1px red solid;
}
</style>
<script>
//定义加载事件
window.onload=function(){
//定义变量
var time;
var t;
//实现开始显示事件功能的函数
function display(){
//实例化
myDate=new Date();
//获取时间戳
time=myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds();
//将获取的时间戳显示在要加载的内容上
$('li').innerHTML=time;
//利用定时器调用自己
t=setTimeout(display,1000);
}
//实现停止时间的函数
function display1(){
//清楚定时器
clearTimeout(t);
}
//获取DOM对象的函数
function $(id){
//返回对象
return document.getElementById(id);
} //触发开始事件
document.getElementById('star').onclick=function(){
display();
}
//触发结束事件
document.getElementById('end').onclick=function(){
display1();
}
}
</script>
</head>
<body>
<div id='li'></div>
<input id='star'type="button" name="button"value='开始'/>
<input id='end'type='button' name='button'value="结束"/>
</body>
</html>
