该代码示例展示了一个简单的HTML页面，包含一个秒表计时器。利用JavaScript的Date对象获取时间，并通过设置定时器每秒更新显示的时间。页面上有开始和暂停按钮来控制计时器的运行。
<!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.οnclick=function(){
stop();
}
//开始按钮
action = document.getElementById("action");
action.οnclick=function(){
start();
}
</script>
</body>
</html>
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
