1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闹钟</title>
</head>
<body>
<script>
function toDouble(num) {//格式化数字为双数
return num < 10 ? "0"+ num : ""+ num; //千万记得return 否则后面格式化时没有返回值，弹出undefined
}
function getDatesAndTimes(){//返回的是格式化过字符串时分秒 201608060941
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;//注意月份需要+1
var day = date.getDate();//日
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var str = toDouble(year) + toDouble(month) + toDouble(day)+toDouble(hour)+toDouble(minute)+toDouble(second);
return str;
}
//图片数组
var images = [
"images/0.jpg","images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg",
"images/6.jpg","images/7.jpg","images/8.jpg","images/9.jpg","images/10.jpg","images/11.jpg"
];
window.onload = function () { //核心 str = 091623 目标：日期时间字符串与图片对应起来
var aImage = document.getElementsByTagName("image");//12张图片
var len = aImage.length;//提升效率用
getDatesAndTimes();//防止1s延时
setInterval(function () {
var strDateAndTime = getDatesAndTimes();//当前的日期和时间
for(var i= 0; i < len; i++){
aImage[i].style.src = images[strDateAndTime.charAt(i)] //当前日期的第几位的数字就是图片数组的下标
}
},1000);
}
</script>
<div id="div1">
<ul>
<li><image src="images/0.jpg"></image></li>
<li> <image src="images/1.jpg"></image></li>
:
<li> <image src="images/2.jpg"></image></li>
<li><image src="images/3.jpg"></image></li>
：
<li><image src="images/4.jpg"></image></li>
<li><image src="images/5.jpg"></image></li>
：
<li><image src="images/6.jpg"></image></li>
<li> <image src="images/7.jpg"></image></li>
：
<li> <image src="images/8.jpg"></image></li>
<li><image src="images/9.jpg"></image></li>
：
<li><image src="images/10.jpg"></image></li>
<li><image src="images/11.jpg"></image></li>
</ul>
</div>
</body>
</html>