数码时钟
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了数码时钟相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
<style>
img{float: left;}
</style>
<script>
window.onload=function () {
var img=document.getElementsByTagName(‘img‘);
var but1=document.getElementById(‘but1‘);
var but2=document.getElementById(‘but2‘);
var tem=null;
but1.onclick=function () {
function mate() {
var oDate=new Date();
var str=doDou(oDate.getHours())+doDou(oDate.getMinutes())+doDou(oDate.getSeconds());
for(var i=0;i<img.length;i++){
img[i].src=‘img/‘+str[i]+‘.jpg‘;
}
}
tem=setInterval(mate,1000);
mate();
}
but2.onclick=function () {
clearInterval(tem);
}
function doDou(n) {
if(n<10){
return ‘0‘+n;
}else{
return ‘‘+n;
}
}
}
</script>
</head>
<body style="font-size: 80px;">
<div style="width: 500px;height: 500px;margin: auto;">
<div style="height: 150px;">
<img src="img/0.jpg">
<img src="img/0.jpg">
<div style="margin: auto; float: left;">
:
</div>
<img src="img/0.jpg">
<img src="img/0.jpg">
<div style="margin: auto; float: left;">
:
</div>
<img src="img/0.jpg">
<img src="img/0.jpg">
</div>
<div>
<input id="but1" type="button" value="开始"/>
<input id="but2" type="button" value="停止"/>
</div>
</div>
</body>
</html>
以上是关于数码时钟的主要内容，如果未能解决你的问题，请参考以下文章