特效描述:原生js 图片时钟运行。原生js图片数字时钟运行,获取电脑本地时间时钟特效源代码。
代码结构
1. 引入JS
<script type="text/javascript" src="myself.js"></script> <script type="text/javascript" src="myself.js"></script>
2. HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时钟作业</title> <style> *{margin:0;padding:0;} ul{list-style:none;} #box{font-size: 60px;} #time{padding:20px;border:1px solid #222;background:#fff;margin:100px auto;height:173px;width:984px;} #time li{float:left;width:123px;height:173px;overflow:hidden;} #time li .num_img{position:relative;top:0;} #time img{display:block;} </style> </head> <script type="text/javascript"> window.onload = function () { var box = document.getElementById('box'); var time = document.getElementById('time'); var oLi = time.getElementsByTagName('li'); var len = oLi.length; var timer = ''; var str = ''; var oldTime = getTime(); timeImg(); clearInterval(timer); timer = setInterval(timeImg, 1000); function getTime() { var myTime = new Date(); //获取当前的系统时间 var myHour = myTime.getHours(); //时 var myMin = myTime.getMinutes(); //分 var mySec = myTime.getSeconds(); //秒 str = toTwo(myHour) + ':' + toTwo(myMin) + ':' + toTwo(mySec); return str; } function toTwo(a) { return a<10 ? '0'+a : ''+a; } function timeImg(){ getTime(); console.log(oldTime +'--'+ str); // box.innerHTML = str; for(var i=0; i<len; i++){ oLi[i].getElementsByTagName('div')[0].style.top = 0; if(i==2 || i==5){ oLi[i].getElementsByTagName('img')[0].src = 'img/colon.jpg'; oLi[i].getElementsByTagName('img')[1].src = 'img/colon.jpg'; }else{ oLi[i].getElementsByTagName('img')[0].src = 'img/'+oldTime.charAt(i)+'.jpg'; if( oldTime.charAt(i) == 9 ){ oLi[i].getElementsByTagName('img')[1].src = 'img/0.jpg'; }else{ oLi[i].getElementsByTagName('img')[1].src = 'img/'+str.charAt(i)+'.jpg'; } } if(str.charAt(i) !== oldTime.charAt(i)){ doMove(oLi[i].getElementsByTagName('div')[0], 'top', 20, -173); } } oldTime = str; } } </script> <body style="background:#ccc;"> <div id="box"></div> <ul id="time"> <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li> <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li> <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li> <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li> <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li> <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li> <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li> <li><div class="num_img"><img src="img/0.jpg" alt=""><img src="img/0.jpg" alt=""></div></li> </ul> </body> </html>