<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.οnlοad=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').οnclick=function(){ display(); } //触发结束事件 document.getElementById('end').οnclick=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>