显示毫秒的时钟

最新推荐文章于 2025-07-14 15:13:11 发布

原创最新推荐文章于 2025-07-14 15:13:11 发布 · 1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #button #xhtml #numbers #input #date

javascript 专栏收录该内容

56 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<style type="text/css">








</style>
<script type="text/javascript">  
  
var t  


  
function startTime(e)  
{  
var today=new Date()  
var h=today.getHours()  
var m=today.getMinutes()  
var s=today.getSeconds()  
var ms=today.getMilliseconds()  
// add a zero in front of numbers<10  
m=checkTime(m)  
s=checkTime(s)  
ms=Math.floor(checkTime(ms)/100)  
document.getElementById('txt').value=h+":"+m+":"+s+":"+ms  
t=setTimeout('startTime()',100)  
document.getElementById("btn1").disabled=true;
document.getElementById("btn2").disabled=false;


}  
  
function checkTime(i)  
{  
if (i<10)   
  {i="0" + i}  
  return i  
}  
  
function stopCount(e)  
{  
clearTimeout(t) ;
document.getElementById("btn1").disabled=false;
document.getElementById("btn2").disabled=true;
}  
  
  
function isKeyPressed(event)  
{  
  if (event.ctrlKey==1)  
    {  
          
   startTime();  
    }  
  if(event.shiftKey==1)  
    {  
          
   stopCount()  
    }  
  }  
</script>  
</head>  
  
<body onkeydown="isKeyPressed(event)">  
<form>  
<input type="button" value="开始计时！" onClick="startTime()" id="btn1">  
<input type="text" id="txt">  
<input type="button" value="停止计时！" onClick="stopCount()" id="btn2">  
</form>  
  
<p>  
请点击上面的"开始计时"按钮。输入框会从 0 开始一直进行计时。点击"停止计时"可停止计时。  
</p>  
  
</body>  
  
</html>

谢谢bkq421511585的建议，代码修改了下，现在按钮不可重复提