JAVASCRIPT(js)简单动态秒表程序设计代码

来源：互联网发布：大智慧炒股软件编辑：程序博客网时间：2024/06/04 20:01

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js计时器</title>
<style>
.clock{
width: 100px;
height: 25px;
background: #000;
color: #0f0;
font-weight: bold;
border-radius: 50px;
text-align: center;
line-height: 25px;
}
</style>
</head>
<body>
<div class="clock" >
<span id="spanid"></span>
<button id="bid" >停止</button>
<button id="bid2">开始</button>
</div>
</body>
<script>
//获取时间函数
function getDate(){
time=new Date();//得到日期对象，并赋值给变量time
nian=time.getFullYear();//得到年份
yue=time.getMonth()+1;//js里面月份是从0-11，的所以应该+1
ri=time.getDate();//注意得到日，并不是getDay();
shi=time.getHours();//得到时
//一下if语句只是为了，让时钟显示更符合人的习惯，时分秒均为两位数
if(shi<10){
shi="0"+shi;
}
fen=time.getMinutes();//得到分
if(fen<10){
fen="0"+fen;
}
miao=time.getSeconds();//得到秒
if(miao<10){
miao="0"+miao;
}
strTimeClock=shi+":"+fen+":"+miao;//拼接字符串
spanObj=document.getElementById("spanid");//得到span标签对象
spanObj.innerHTML=strTimeClock;//<span>strTimeClock的内容就在这个里面了</span>
}

getDate();//因为如果设置定时器，只会一秒后才开始刷新页面，刚开始打开页面会默认显示10:00:20
//设置定时器
sobj=setInterval(function(){//返回一个定时器对象，可以作为清除定时器函数中的参数
getDate();//每隔一秒钟执行一次getDate（）函数
},1000);
/*也可以等效为这段代码
* setInterval(getDate,1000);注意不要写成函数名加上（），即getDate（）是错误的！！！
* */
//清除定时器
// clearInterval(sobj);
bidobj=document.getElementById("bid");
bidobj.onclick=function(){
clearInterval(sobj)
}

//从心开始reset

bid2obj=document.getElementById("bid2");
bid2obj.onclick=function(){
sobj=setInterval(function(){//返回一个定时器对象，可以作为清除定时器函数中的参数
getDate();//每隔一秒钟执行一次getDate（）函数
},1000);
}

</script>
</html>

1 0