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

Javascript—简单电子时钟制作总结

2017-01-10 23:47 435 查看

代码

<!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实现动态时间效果。

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

标签：

相关文章推荐

新的分享

章节导航