<p></p> <script src="https://code.jquery.com/jquery-latest.js"></script> <script> window.onload=function(){ var oBody=document.body; var oP=document.getElementById("time"); setInterval(fnTime,1000); fnTime(); } function fnTime(){ var myTime=new Date(); var iHours=myTime.getHours(); var iMin=myTime.getMinutes(); var iSec=myTime.getSeconds(); var str=toTwo(iHours)+toTwo(iMin)+toTwo(iSec); //oP.innerHTML=str; strToImg(str); } /*将数字转换为字符串且一位数显示为两位,*/ function toTwo(n){ return n<10?'0'+n:''+n; } var imageArray=[]; //将个图像定义给相应的数组元素,使数组元素下标与图像所对应的数字字符一一对应 imageArray[0]="https://www.jb51.net/images/0.png"; imageArray[1]="images/1.png"; imageArray[2]="images/2.png"; imageArray[3]="images/3.png"; imageArray[4]="images/4.png"; imageArray[5]="images/5.png"; imageArray[6]="images/6.png"; imageArray[7]="images/7.png"; imageArray[8]="images/8.png"; imageArray[9]="images/9.png"; imageArray[10]="images/fh.png"; function strToImg(str){ var str=str; var tempHtml=''; for(var i=0;i<str.length;i++){ var imgHtml="<img src="https://www.jb51.net/+imageArray[str.charAt(i)]+"/>"; tempHtml+=imgHtml; } $("#time").html(tempHtml); } </script>
jquery制作图片时钟特效(2)
内容版权声明:除非注明,否则皆为本站原创文章。