本文實例講述了jQuery超酷平面式時鐘效果代碼。分享給大家供大家參考。具體如下：
jQuery制作的超酷平面式時鐘效果，把日期和時間通過橫向刻度條展現，經測試效果非常酷，是一個很不錯的學習實例。
這里我們還要提到之前實現的另一個特別新穎的時間顯示樣式：js實現溫度計時間樣式，兩者都完全突破了傳統的時鐘概念，感興趣的各位可不要錯過了哈。
運行效果圖：----------------------查看效果 下載源碼-----------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jQuery超酷平面式時鐘效果代碼如下
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="JS代碼,時鐘,日期,刻度條,jQuery" /><meta name="description" content="jQuery制作的超酷平面式時鐘效果，更多時鐘,日期,刻度條,jQuery請訪問武林網JS代碼頻道。" /><title>jQuery制作的超酷平面式時鐘效果_武林網</title><style type="text/css">body { background:#bae1ea url(back.jpg) 50% 0px no-repeat; color:#000; }/* container for clock */#wrap { position:relative; margin: 100px auto 0; width:700px; height:440px; background:url("slider clock(trans).png") no-repeat top left; border-style:solid; border-width:1px; overflow:hidden; }/* style background and size of all sliding divs */#wrap div { position:absolute; margin-left:-700px; width:1400px; height:40px; background:url("slider clock(trans).png") repeat-x; } /* specific position and background position for sliding divs */#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="jquery.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" --><div style="text-align:center;clear:both"><p>來源：<a href="http://www.49028c.com" target="_blank">vonholdt</a> 代碼整理：<a href="http://www.49028c.com" target="_blank">武林網</a> 感謝：<a href="http://www.49028c.com" target="_blank">liulisuo</a></p><p>轉載請注明出處，此代碼僅供學習交流，請勿用于商業用途。</p></div></body></html>以上就是為大家分享的jQuery超酷平面式時鐘效果代碼，希望大家可以喜歡。
新聞熱點
疑難解答
