您的位置：首页 > Web前端 > JavaScript

js实现简单的时钟

2016-03-04 20:01 681 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script>
function toDou(n)
{
if(n<10)
return '0'+n
else
return ''+n
}
window.onload = function()
{
var oImg = document.getElementsByTagName('img')

function tick()
{
var oDate = new Date();
var str = toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds())
for(var i = 0; i<oImg.length;i++)
{
oImg[i].src ="/Users/daixj/project/javascript/51cto_javascritp/images/"+str.charAt(i)+".png";//charAt用于兼容IE7
}
}
setInterval(tick,1000)
tick();
}
</script>
</head>

<body style="background:black; color:white; font-size:50px;">
<img src="/Users/daixj/project/javascript/51cto_javascritp/images/0.png"/>
<img src="/Users/daixj/project/javascript/51cto_javascritp/images/0.png"/>
:
<img src="/Users/daixj/project/javascript/51cto_javascritp/images/0.png"/>
<img src="/Users/daixj/project/javascript/51cto_javascritp/images/0.png"/>
:
<img src="/Users/daixj/project/javascript/51cto_javascritp/images/0.png"/>
<img src="/Users/daixj/project/javascript/51cto_javascritp/images/0.png"/>
</body>
</html>

效果图如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航