<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>炫酷時鍾</title>
<style type="text/css">
body{
height: 100%;color: #51555c;
background: url("./img/bg1.png") no-repeat;
/* 背景圖垂直、水平均居中 */
background-position: center center;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當內容高度大於圖片高度時，背景圖像的位置相對於viewport固定 */
background-attachment: fixed;
/* 讓背景圖基於容器大小伸縮 */
background-size: cover;
/* 設置背景顏色，背景圖加載過程中會顯示背景色 */
background-color: #464646;
}
img{
display: inline-block;
width: 28px;
height: 50px;
margin:0 4px;
}
.main_demo{
width: 910px;
min-height: 600px;
margin:30px auto 0 auto;
}
.main_demo h2{
text-align: center;
padding: 10px;
font-size: 40px;
color: wheat;
}
.clock{
width: 500px;
padding: 40px;
margin:2px auto;
}
.clock_right{
text-align: right;
margin:4px;
}
</style>
</head>
<body>
<div class="main_demo">
<div align="center">
<h2>Js 炫酷時鍾</h2>
</div>
<div class="clock">
<!--10點-->
<img src="" />
<img src="" />
：
<!--40分-->
<img src="" />
<img src="" />
：
<!--*秒-->
<img src="" />
<img src="" />
<br />
<div class="clock_right">
<!--2017年-->
<img src="" />
<img src="" />
<img src="" />
<img src="" />
：
<!--09月-->
<img src="" />
<img src="" />
：
<!--27日-->
<img src="" />
<img src="" />
</div>
</div>
</div>
</body>
<script type="text/javascript">
var imgs = document.getElementsByTagName('img');
setInterval(getTime,1000);
function getTime(){
var _date = new Date();
var year = _date.getFullYear();
var month = _date.getMonth()+1;
var day = _date.getDate();
var hour = _date.getHours();
var minutes = _date.getMinutes();
var second = _date.getSeconds();
var newDate = addZero(hour) + "" + addZero(minutes)+ "" + addZero(second)+""+addZero(year) + "" + addZero(month)+ "" + addZero(day)
;
console.log(newDate.length);
for(var i = 0;i < newDate.length;i++){
imgs[i].src = 'img/time_' + newDate[i] + '.png';
}
}
getTime();
function addZero(num){
if(num < 10){
num = "0" + num;
}
return num
}
</script>
</html>
