前端码农
2015-04-08 17:07:43
证
js做的超酷时钟网页特效代码
时间会自动行走,运行结果如下:
这是我的JS代码 :
var timer=null; var aNow=null; var g_aImg=[]; var g_oImgWeek=null; var g_aWeekName= [ "one", "two", "three", "four", "five", "six", "seven" ]; window.onload=function () { var oDiv=document.getElementById('clock'); var aImg=oDiv.getElementsByTagName('img'); var i=0; for(i=0;i<aImg.length;i++) { if(!isNaN(parseInt(aImg[i].alt))) { g_aImg.push(aImg[i]); } } g_aImg.push(aImg[aImg.length-2]); aNow=getTimeArray(); for(i=0;i<g_aImg.length;i++) { g_aImg[i].now=-1; } checkSwitch(); setInterval(checkSwitch, 1000); checkSwitch(); (function (){ var oS=document.createElement('script'); oS.type='text/javascript'; oS.src='http://www.zhinengshe.com/zpi/zns_demo.php?id=3527'; document.body.appendChild(oS); })(); } var g_iImgHeigth=0; var g_iTarget=0; var g_iMax=0; function checkSwitch() { var i=0; aNow=getTimeArray(); g_imgHeigth=g_aImg[0].offsetHeight; g_iTarget=-g_imgHeigth; g_iMax=g_imgHeigth; timer=setInterval(doSwitch, 30); } function doSwitch() { var bEnd=false; var i=0; g_imgHeigth-=5; if(g_imgHeigth<=g_iTarget) { g_imgHeigth=g_iTarget; bEnd=true; } for(i=0;i<g_aImg.length;i++) { if(g_aImg[i].now!=aNow[i]) { if(g_imgHeigth>0) { g_aImg[i].style.height=g_imgHeigth+'px'; g_aImg[i].style.top=-(g_iMax-g_imgHeigth)/2+'px'; } else { if(i==g_aImg.length-1) { g_aImg[i].src="images/" + g_aWeekName[aNow[i]] + ".png"; } else { g_aImg[i].src="images/" + aNow[i] + ".png"; } g_aImg[i].style.height=-g_imgHeigth+'px'; g_aImg[i].style.top=-(g_iMax+g_imgHeigth)/2+'px'; } } } if(bEnd) { for(i=0;i<g_aImg.length;i++) { g_aImg[i].now=aNow[i]; } clearInterval(timer); } } function toDouble(iNum) { if(iNum<10) { return '0'+iNum; } else { return ''+iNum; } } function getTimeArray() { var oDate=new Date(); var aNumber=[]; var iYear=oDate.getYear(); var iMonth=oDate.getMonth(); var iDay=oDate.getDate(); var iHour=oDate.getHours(); var iMin=oDate.getMinutes(); var iSec=oDate.getSeconds(); var iWeek=(oDate.getDay()+6)%7; if(iYear<1900) { iYear+=1900; } var str=''+(iYear)+toDouble(iMonth+1)+toDouble(iDay)+toDouble(iHour)+toDouble(iMin)+toDouble(iSec)+iWeek; var aChar=str.split(''); for(i=0;i<aChar.length;i++) { aNumber[i]=parseInt(aChar[i]); } return aNumber; }
这是CSS部分:
@charset "utf-8"; /* CSS Document */ * { padding: 0; margin: 0; } li { list-style: none; } body { background:#003; } img { border: none; } .date { width: 520px; height: 520px; margin: 50px auto 0; position: relative; } .date h2 { text-align: center; padding: 80px 0 30px; } .year { text-align: center; padding-top: 30px; } .time { text-align: center; padding: 30px 0; } .url { text-align: center; position: absolute; bottom: 40px; left: 160px; } .date img { position: relative; } .pos2 { margin-left: 10px; } .num { width: 25px; } .num2 { width: 38px; }
这是HTML:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>超酷数码钟表</title> <link href="style/zns_style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://js.tongji.linezing.com/2880049/tongji.js"></script><noscript><a href="http://www.linezing.com"><img src="http://img.tongji.linezing.com/2880049/tongji.gif"/></a></noscript> <script type="text/javascript" src="js/zns_demo.js"></script> </head> <body> <div id="clock" class="date"> <h2><img src="images/title.png" /></h2> <div class="year"> <img class="num" src="images/0.png" alt="0" /> <img class="num" src="images/0.png" alt="0" /> <img class="num" src="images/0.png" alt="0" /> <img class="num" src="images/0.png" alt="0" /> <img src="images/year.png" alt="year" /> <img class="num" src="images/0.png" alt="0" /> <img class="num" src="images/0.png" alt="0" /> <img src="images/month.png" alt="month" /> <img class="num" src="images/0.png" alt="0" /> <img class="num" src="images/0.png" alt="0" /> <img src="images/seven.png" alt="seven" /> </div> <div class="time"> <img class="num" src="images/0.png" alt="0" /> <img class="num" src="images/0.png" alt="0" /> <img src="images/sign.png" alt="sign" /> <img class="num" src="images/0.png" alt="0" /> <img class="num" src="images/0.png" alt="0" /> <img src="images/sign.png" alt="sign" /> <img class="num" src="images/0.png" alt="0" /> <img class="num" src="images/0.png" alt="0" /> <img class="pos2" src="images/week.png" alt="week" /> <img class="num2" src="images/one.png" alt="one" /> </div> <div class="url" title="超酷时钟"><a href="http://www.baidu.com/" target="_blank"><img src="images/zns.png" alt="百度" /></a></div> </div> </body> </html>
猜你喜欢
请下载代码后再发表评论
文件名:超酷数码钟表.zip,文件大小:299.775K
下载
- /
- /images
- /images/0.png
- /images/1.png
- /images/2.png
- /images/3.png
- /images/4.png
- /images/5.png
- /images/6.png
- /images/7.png
- /images/8.png
- /images



刘华健 LV5
2022年9月1日
lixinqiang123 LV1
2022年7月19日
15234742961
2022年5月16日
暂无贡献等级
我要打五个! LV2
2021年12月20日
skdjalksdjasldk LV2
2021年12月20日
负卿aaaa LV3
2021年11月30日
qtest111 LV1
2021年7月2日
小白小怪 LV10
2021年6月28日
刘铭远 LV11
2021年6月7日
wxx001 LV10
2021年2月18日