智能时钟,需要自己找图片:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #000;
}
img{
height: 50px;
width: 30px;
vertical-align:middle
}
span{
font-size: 30px;
color: #ffa801;
display:inline-block;
height:100%;
vertical-align:middle;
}
</style>
</head>
<body>
<img src="img/0.jpg" alt="">
<img src="img/1.jpg" alt="">
<span>:</span>
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<span>:</span>
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
<img src="img/9.jpg" alt="">
<script>
function toDou(n){
if(n<10){
return '0'+n;
}else{
return ''+n;
}
}
var aImg = document.getElementsByTagName('img');
// var str = '231933';
function shijian(){
var oDate = new Date();
var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) + toDou(oDate.getSeconds());
// alert(str);
for(var i = 0;i < aImg.length; i++){
// 适配IE7的写法aImg[i].src = 'img/'+strcharAt(i)+'.jpg';
aImg[i].src = 'img/'+str[i]+'.jpg';
};
};
setInterval (shijian, 1000);
shijian();
</script>
</body>
</html>