|
<!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <title>秒表</title> <style> .contain{ width: 200px; height: 50px; background: #000; border-radius: 20px; font-weight: bold; color: #0f0; text-align: center; font-size: 30px; line-height: 50px; } </style> </head> <body> <div class="contain"> <span id="Interval">10:38:00</span> </div> <button id='pause'>暂停</button> <button id='action'>开始</button> <script> //获取日期对象 function getDate(){ dobj=new Date(); hour = dobj.getHours(); //时 minute=dobj.getMinutes(); //分 second = dobj.getSeconds();//秒 str=hour+":"+minute+":"+second; dsq=document.getElementById("Interval");//获取id Interval dsq.innerHTML=str; } //未点击按钮前,先执行一次 getDate(); start(); //开始函数 function start(){ sobj=setInterval(getDate,1000); //设置定时器,一秒钟执行一次getDate() } //停止函数 function stop(){ clearInterval(sobj); //清除定时器 } //关闭按钮 c = document.getElementById("pause"); c.onclick=function(){ stop(); } //开始按钮 action = document.getElementById("action"); action.onclick=function(){ start(); } </script> </body> </html> |
|