效果图:
是图片实现的,根据时间动态切换
图片素材是这样:
找到类似的图并修改路径就可以了。
直接看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clock</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
width: 122px;
height: 172px;
float: left;
list-style: none;
overflow: hidden;
}
div{
position: relative;
top: 0;
left: 0;
}
</style>
</head>
<body>
<ul>
<li>
<div>
<img src="../img/0.JPG"/>
<img src="../img/0.JPG"/>
</div>
</li>
<li>
<div>
<img src="../img/0.JPG"/>
<img src="../img/0.JPG"/>
</div>
</li>
<li>
<img src="../img/colon.JPG" id="img1"/>
</li>
<li>
<div>
<img src="../img/0.JPG"/>
<img src="../img/0.JPG"/>
</div>
</li>
<li>
<div>
<img src="../img/0.JPG"/>
<img src="../img/0.JPG"/>
</div>
</li>
<li>
<img src="../img/colon.JPG" id="img2"/>
</li>
<li>
<div>
<img src="../img/0.JPG"/>
<img src="../img/0.JPG"/>
</div>
</li>
<li>
<div>
<img src="../img/0.JPG"/>
<img src="../img/0.JPG"/>
</div>
</li>
</ul>
<script type="text/javascript">
function $( v ){
if( typeof v === 'function' ){
window.onload = v;
} else if ( typeof v === 'string' ) {
return document.getElementById(v);
} else if ( typeof v === 'object' ) {
return v;
}
}
var aDiv = document.getElementsByTagName('div');
var oDate = new Date();
function addZ(a){return a<10 ? '0'+a : ''+a;}
// 获取得到的时间
var str1 = addZ(oDate.getHours()) + addZ(oDate.getMinutes()) + addZ(oDate.getSeconds());
//这里时间的数字为6位
for(var i = 0;i < 6; i++){
i % 2 == 0 ? twoPic(aDiv[i],str1.charAt(i),nextNumS) : twoPic(aDiv[i],str1.charAt(i), nextNumG);
}
function twoPic(nDiv, fNum, nFn){
var aImg = nDiv.getElementsByTagName('img')
aImg[0].src = '../img/' + fNum + '.JPG';
aImg[1].src = '../img/' + nFn(Number(fNum)) + '.JPG';
}
function nextNumG(a){ //时分秒的个位数的下一位数
return a + 1 > 9 ? 0 : a +1;
}
function nextNumS(a){ //时分秒的十位数的下一位数
return a + 1 > 5 ? 0 : a +1;
}
setInterval(showTime, 1000);
function showTime(){
$('img1').src= $('img2').src='../img/colon0.JPG';
var oDate = new Date()
var str2 = addZ(oDate.getHours()) + addZ(oDate.getMinutes()) + addZ(oDate.getSeconds());
for(var i = 0;i < 6; i++){
i % 2 == 0 ? changePic(str1.charAt(i),str2.charAt(i),aDiv[i],nextNumS,str2) :changePic(str1.charAt(i),str2.charAt(i),aDiv[i],nextNumG,str2);
}
str1 = str2; //更新原来获取的时间
setTimeout(function(){ //每隔0.5秒切换一下':'图片,出现一闪一闪的效果
$("img1").src = $("img2").src = '../img/colon.JPG';
},500)
}
// 判断当前时间和下一秒是否相等来切换图片
function changePic(fNum, nNum, nDiv, nFn, endTime){
if(fNum != nNum){
var aImg = nDiv.getElementsByTagName('img')
doMove(nDiv, 'top',10 ,-172);
//172px每30毫秒移动10px,移动大概需要用500多毫秒,因此下面延时计时器时间应该在600-1000毫秒之间
setTimeout(function(){
aImg[0].src="../img/" + nNum + '.JPG'; //23:59:59时下一秒的图片皆为0
aImg[1].src = endTime === '235959' ? '../img/' + 0 + '.JPG': '../img/' + nFn(Number(nNum)) + '.JPG' ;
nDiv.style.top = 0 + 'px';
}, 900);
}
}
function getStyle( obj, attr ){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
function doMove ( obj, attr, dir, target, endFn ) {
dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
clearInterval( obj.timer );
obj.timer = setInterval(function () {
var speed = parseInt(getStyle( obj, attr )) + dir; // 步长
if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
speed = target;
}
obj.style[attr] = speed + 'px';
if ( speed == target ) {
clearInterval( obj.timer );
endFn && endFn();
}
}, 30);
}
</script>
</body>
</html>