首页 > 代码库 > jQuery平面刻度尺风格的网页时钟（很好玩）
jQuery平面刻度尺风格的网页时钟（很好玩）
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery平面刻度尺式时钟效果</title><style type="text/css">body{background: #bae1ea url(back.jpg) 50% 0px no-repeat;color: #000;}#wrap{position: relative;margin: 100px auto 0;width: 700px;height: 440px;background: url("http://www.codefans.net/jscss/demoimg/201310/slider clock(trans).png") no-repeat top left;border-style: solid;border-width: 1px;overflow: hidden;}#wrap div{position: absolute;margin-left: -700px;width: 1400px;height: 40px;background: url("http://www.codefans.net/jscss/demoimg/201310/slider clock(trans).png") repeat-x;}#wrap #day{top: 40px;background-position: 0 -440px;}#wrap #month{top: 120px;background-position: 0 -480px;}#wrap #date{top: 200px;background-position: 0 -520px;}#wrap #hour{top: 280px;background-position: 0 -560px;}#wrap #min{top: 320px;background-position: 0 -600px;}#wrap #sec{top: 400px;background-position: 0 -640px;}#title{margin: 20px auto;width: 550px;text-align: center;}#other{margin: 10px auto;width: 550px;text-align: center;}</style><script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"> </script><script> $(document).ready(function(){ function checktime(olddel){ var now = new Date(); var nowdel = now.getDay() + "|" + now.getMonth() + "|" + now.getDate() + "|" + now.getHours() + "|" + now.getMinutes() + "|" + now.getSeconds(); if ( olddel != nowdel ) { var oldsplit = olddel.split("|"); var nowsplit = nowdel.split("|"); if ( oldsplit[5] != nowsplit[5] ) { clock_slide(‘#sec‘,nowsplit[5],11); if ( oldsplit[4] != nowsplit[4] ) { clock_slide(‘#min‘,nowsplit[4],11); if ( oldsplit[3] != nowsplit[3] ) { clock_slide(‘#hour‘,nowsplit[3],28); if ( oldsplit[2] != nowsplit[2] ) { clock_slide(‘#day‘,nowsplit[0],100); clock_slide(‘#date‘,(nowsplit[2]-1),22); if ( oldsplit[1] != nowsplit[1] ) { clock_slide(‘#month‘,nowsplit[1],57); }; }; }; }; }; }; function clock_slide(which,howmuch,multiple){ $(which).stop().animate({marginLeft: ((howmuch*multiple)-700)+‘px‘}, 250, ‘linear‘); }; setTimeout(function(){checktime(nowdel);}, 250); }; checktime("0|0|0|0|0|0"); });</script></head><body> <div id="wrap"> <div id="day"> </div> <div id="month"> </div> <div id="date"> </div> <div id="hour"> </div> <div id="min"> </div> <div id="sec"> </div> </div> <!-- End "wrap" --></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。