代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background: #000;
color: #FFF;
font-size: 50px;
}
</style>
<script type="text/javascript">
function totwo(num) {
if (num < 10) {
return '0' + num;
} else {
return '' + num;
}
}
window.onload = function() {
var oTime = document.getElementById('time');
var aImgs = oTime.getElementsByTagName('img');
function newtime() {
var mydate = new Date();
var stime = totwo(mydate.getHours()) + totwo(mydate.getMinutes()) + totwo(mydate.getSeconds());
for (var i = 0; i < aImgs.length; i++) {
aImgs[i].src = 'images/' + stime.charAt(i) + '.png';
}
}
setInterval(newtime,1000);
newtime();
console.log(stime);
}
</script>
</head>
<body>
<div id="time">
<img src="images/0.png" />
<img src="images/0.png" /> :
<img src="images/0.png" />
<img src="images/0.png" /> :
<img src="images/0.png" />
<img src="images/0.png" />
</div>
</body>
</html>
制作思路:html:用一个div盒子装着两张数字img图片.然后加入css样式修改背景颜色,字体颜色,和冒号尺寸。
Javascript思路:用数字图片的循环实现时、分、秒的动态运行。
关键点:创建一个日期对象,得到一个时间戳获取系统时间。 var mydate = new Date();
var stime = totwo(mydate.getHours()) + totwo(mydate.getMinutes()) + totwo(mydate.getSeconds());
再利用for循环:for (var i = 0; i < aImgs.length; i++) {
aImgs[i].src = 'images/' + stime.charAt(i) + '.png';
}
得到一个静态的时刻,但这个时间需要每次刷新才能显示最新的时间,所以还不够完善。
因此可以利用定时器setInterval实现动态时间效果。