<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script language="JavaScript">
var imgs = [];
for(var i = 0; i < 10; i++) {
imgs[i] = new Image();
imgs[i].src = 'img/' + i + '.jpg';
}
function displayTime() {
var now = new Date();
var time = [];
var hrs = now.getHours(); //小时
hrs = (hrs < 10 ? '0' : '') + hrs;
time[0] = hrs.charAt(0);
time[1] = hrs.charAt(1);
var mins = now.getMinutes(); //分钟
mins = (mins < 10 ? '0' : '') + mins;
time[2] = mins.charAt(0);
time[3] = mins.charAt(1);
var secs = now.getSeconds(); //秒
secs = (secs < 10 ? '0' : '') + secs;
time[4] = secs.charAt(0);
time[5] = secs.charAt(1);
for(var i = 0; i < time.length; i++) { //在指定时间调用特定的图片
var img = document.getElementById('d' + i);
img.src = imgs[time[i]].src;
img.alt = time[i];
}
}
</script>
<body onLoad="setInterval('displayTime()',1000);">
<p class="style1">当前时间：</p>
<img id="d0" src="img/0.jpg" alt="0">
<img id="d1" src="img/0.jpg" alt="0">
<img src="img/10.jpg" alt=":">
<img id="d2" src="img/0.jpg" alt="0">
<img id="d3" src="img/0.jpg" alt="0">
<img src="img/10.jpg" alt=":">
<img id="d4" src="img/0.jpg" alt="0">
<img id="d5" src="img/0.jpg" alt="0">
</body>
</html>需要电子表图片，从0-9
下载地址：https://download.csdn.net/download/qq_42192693/10662532
运行结果：
