前端码农
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

- 使用java和javascript判断当前浏览者的操作系统
- 证 javascript简单调色板工具
- js进度条(原创可用于学习)
- {Tonfay}[js动态报表][兼容IE6+/火狐/360/谷歌/等各大浏览器][可手动设置间隔时间读取数据/并且显示在图表上]
- 证 5个小javascript特效实例
- 证精 史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码
- 正则表达式的JS验证
- 证 js canvas无限生成国风水墨画
- js打印,预览的功能.希望采纳.
- 证 JavaScript写的贷款计算器源代码下载
- 证 纯js开发的时钟,带秒钟
- 证 js万年历查询设置工作日前端源代码分享

微信网友_6429578499821568 LV1
2023年4月12日
wxx001 LV10
2021年4月10日
ML木龙 LV1
2020年5月15日
xwc199917 LV1
2020年4月25日
章正昆 LV1
2020年3月27日
MM5841314 LV1
2019年12月12日
157学习中 LV1
2019年7月19日
web1903 LV10
2019年7月11日
lw19900921 LV25
2019年5月20日
andy_zdm LV1
2019年4月22日

cksndh LV4
2023年7月8日
刘Boss 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日