数字时钟
程序员文章站
2022-03-26 17:22:44
...
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
1. 首先设置一个DIV并且插入六张图片表示时间：
<
div id = "box" >
<
img src = "img/0.png"
id = "img1" / >
<
img src = "img/0.png"
id = "img2" / > 时 <
img src = "img/0.png"
id = "img3" / >
<
img src = "img/0.png"
id = "img4" / > 分 <
img src = "img/0.png"
id = "img5" / >
<
img src = "img/0.png"
id = "img6" / > 秒 <
/div>
2. 设制一个定时器：
<
script >
setInterval(function(), 1000);
这行代码代表着， 给这个函数定义每秒运行一次
3. 定义定时器内的函数：
function() {
var now = new Date(); //获取当下时间；
var hour = now.getHours(); //获取当下小时；
var fen = now.getMinutes(); //获取当下分钟；
var miao = now.getSeconds(); //获取当下秒；
获取时间目的： 由于这个函数是每秒都刷新的， 所以当下时间一直变化， 可以利用这个控制获取的照片的id， 使照片一直刷新， 达到制作一个电子时钟的目的。
var time = "" + miao; //将秒转化为字符串；
var time2 = "" + fen; //将分钟转化为字符串；
var time3 = "" + hour; //将小时转化为字符串；
转化字符串目的： 后边获取照片时候使用的是字符串， 所以需要把得到的时间转化为字符串。
if(miao < 10) {
img5.src = "img/" + 0 + ".png";
img6.src = "img/" + time[0] + ".png";
} else {
img5.src = "img/" + time[0] + ".png";
img6.src = "img/" + time[1] + ".png";
}
这串代码的意思是： 如果秒小于10， 代表秒第一位的照片设置为0， 第二位为获取的秒的字符串。（ 因为如果实时的秒为一位数时， 代表秒的第一位没有字符串表示）
除了10以外， 代表秒的第一位数字为获取的秒的第一位字符串， 第二位为获取秒的第二位字符串。（ 分钟和小时同理）
if(fen < 10) {
img3.src = "img/" + 0 + ".png";
img4.src = "img/" + time2[0] + ".png";
} else {
img3.src = "img/" + time2[0] + ".png";
img4.src = "img/" + time2[1] + ".png";
}
if(hour < 10) {
img1.src = "img/" + 0 + ".png";
img2.src = "img/" + time3[0] + ".png";
} else {
img1.src = "img/" + time3[0] + ".png";
img2.src = "img/" + time3[1] + ".png";
}
}
</script>
</body>
上一篇： 数字时钟