jQuery超酷平面式时钟效果代码分享
本文实例讲述了jQuery超酷平面式时钟效果代码。分享给大家供大家参考，具体如下：
jQuery制作的超酷平面式时钟效果，把日期和时间通过横向刻度条展现，经测试效果非常酷，是一个很不错的学习实例。
这里我们还要提到之前实现的另一个特别新颖的时间显示样式：js实现温度计时间样式，两者都完全突破了传统的时钟概念，感兴趣的各位可不要错过了哈。
运行效果图：----------------------查看效果下载源码-----------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery超酷平面式时钟效果代码如下
<!DOCTYPEhtml>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="keywords"content="JS代码,时钟,日期,刻度条,jQuery"/>
<metaname="description"content="jQuery制作的超酷平面式时钟效果，更多时钟,日期,刻度条,jQuery请访问毛票票JS代码频道。"/>
<title>jQuery制作的超酷平面式时钟效果_毛票票</title>
<styletype="text/css">
body{background:#bae1eaurl(back.jpg)50%0pxno-repeat;color:#000;}
/*containerforclock*/
#wrap{position:relative;margin:100pxauto0;width:700px;height:440px;background:url("sliderclock(trans).png")no-repeattopleft;border-style:solid;border-width:1px;overflow:hidden;}
/*stylebackgroundandsizeofallslidingdivs*/
#wrapdiv{position:absolute;margin-left:-700px;width:1400px;height:40px;background:url("sliderclock(trans).png")repeat-x;}
/*specificpositionandbackgroundpositionforslidingdivs*/
#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:20pxauto;width:550px;text-align:center;}
#other{margin:10pxauto;width:550px;text-align:center;}
</style>
<scripttype="text/javascript"src="jquery.js"></script>
<script>
$(document).ready(function(){
functionchecktime(olddel){
varnow=newDate();
varnowdel=now.getDay()+"|"+now.getMonth()+"|"+now.getDate()+"|"+now.getHours()+"|"+now.getMinutes()+"|"+now.getSeconds();
if(olddel!=nowdel){
varoldsplit=olddel.split("|");
varnowsplit=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);
};
};
};
};
};
};
functionclock_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>
<divid="wrap">
<divid="day"></div>
<divid="month"></div>
<divid="date"></div>
<divid="hour"></div>
<divid="min"></div>
<divid="sec"></div>
</div><!--End"wrap"-->
<divstyle="text-align:center;clear:both">
<p>来源：<ahref="//www.nhooo.com"target="_blank">vonholdt</a>代码整理：<ahref="//www.nhooo.com"target="_blank">毛票票</a>感谢：<ahref="//www.nhooo.com"target="_blank">liulisuo</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。