（1）实现效果：
获取当前系统时间，展现在页面上
（2）实现代码：
HTML+CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{margin: 0px;padding: 0px;} body{padding: 100px;background: #1b181f;color: #fff;font-size: 50px;} </style> </head> <body> <div id="box"> <img src="0.png" alt="" /> <img src="0.png" alt="" /> : <img src="0.png" alt="" /> <img src="0.png" alt="" /> : <img src="0.png" alt="" /> <img src="0.png" alt="" /> </div> </body> </html>
JS:
<script>
function toDouble(num){ //用以将一位数的时间值转换为两位数
if(num<10){
return '0'+num;
}else{
return ''+num;
}
};
window.onload=function(){
var oBox = document.getElementById('box');
var aImg = oBox.getElementsByTagName('img');
var i = 0;
function updateTime(){
var oDate = new Date();
var str = toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());
//alert(str.charAt(2)); //charAt() 方法可返回指定位置的字符
for(i=0;i<aImg.length;i++){
aImg[i].src=str.charAt(i)+'.png'
}
};
setInterval(updateTime,1000);
updateTime(); //页面加载之后就运行
}
</script>
(3)效果如下图所示：
素材图片：
