setTimeout编写的秒表

最新推荐文章于 2024-01-18 10:20:12 发布

luyi1009

最新推荐文章于 2024-01-18 10:20:12 发布

阅读量669

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/luyi1009/article/details/37745295

本文介绍了一个简单的秒表计时器的实现方法，使用HTML、CSS和JavaScript编写。通过setTimeout函数来定时更新时间显示，并提供了开始、暂停、继续及停止等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>秒表</title>
</head>
<style type="text/css">
input{
border:1px solid #0FF;
font-size:24px;
color:#00F;

}
#showtime{ width:332px;}

</style>

<script type="text/javascript">
var count=0;
var hour=0;var minute=0; var second=0;
var times;
function begin()
{

var millis=new Date().getMilliseconds();
if(millis==999)
{
second++;

}
if(second>=60)
{
minute++;
second=0;

}
if(minute>=60)
{
hour++;
minute=0;
}
document.getElementById("showtime").value=hour+":"+minute+":"+second+":"+millis;

times = setTimeout("begin()",0);
}

function pausetime()
{
clearTimeout(times);
}

function stoptime()
{
clearTimeout(times);
hour=minute=second=count=0;

}

</script>

<body>

<input type="text" id="showtime"/><br />
<input type="button" onclick="begin()" value="开始计时"/>
<input type="button" onclick="pausetime()" value="暂停"/>
<input type="button" onclick="begin()" value="继续"/>
<input type="button" onclick="stoptime()" value="停止"/>

</body>

</html>

写这个代码的时候给卡住了，原因是没有真正理解setTimeout方法的本质，它是隔一秒去调用一次方法，如果setTimeout（“”，1）是隔一秒调用一次，所以系统时间是过去了2毫秒......