新手做的jquery倒计时,求大神精简代码指正
html代码
//容器 Li0、Li1、Li2、Li3、Li4、Li5不可修改 其他任意添加 <ul id="Timer"> <li class="Li5"><div class="liDiv"></div></li> <li class="Li4"><div class="liDiv"></div></li> <li class="Li6">:</li> <li class="Li3"><div class="liDiv"></div></li> <li class="Li2"><div class="liDiv"></div></li> <li class="Li6">:</li> <li class="Li1"><div class="liDiv"></div></li> <li class="Li0"><div class="liDiv"></div></li> </ul> //无缝时间表示数字 加到网页最下面或者任意地方 <div id="Timera"> <em class="Em0">0</em> <em class="Em1">1</em> <em class="Em2">2</em> <em class="Em3">3</em> <em class="Em4">4</em> <em class="Em5">5</em> <em class="Em6">6</em> <em class="Em7">7</em> <em class="Em8">8</em> <em class="Em9">9</em> <em class="Em0">0</em> </div> <div id="Timerb"> <em class="Em0">0</em> <em class="Em1">1</em> <em class="Em2">2</em> <em class="Em3">3</em> <em class="Em4">4</em> <em class="Em5">5</em> <em class="Em6">6</em> <em class="Em0">0</em> </div>
css样式
#Timer{ position:relative; height:59px; margin:0px auto; } #Timer li{
list-style: none outside none; position:relative; width:20px; height:50px; float:left; overflow:hidden; } .liDiv{ position:relative; margin:0px auto;} #Timer em{ width:20px; font-size:20px; height:50px; line-height:50px; text-align:center; color:#019858; display:inline-block; display:block; position:relative; top:0px; } #Timera em{ display:none; } #Timerb em{ display:none; }
js
<script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript"> (function(){ function Timer(id,year,month,day,hour,minute,second){ var height = id.children("li").height(); var lenA = $("#Timera").children("em").length*height-height; var lenB = $("#Timerb").children("em").length*height-height; var newTime = new Date(year,month-1,day,hour,minute,second); var Time = null,value,stopTime=function(){ window.clearInterval(Time); },startTime=function(){ Time = window.setInterval(function(){ play(); },1000); },play = function(){ value = newTime-new Date(); if(value <= 0){ return; } value = computingTime(value); /*时间区*/ id.children("li.Li0").children("div.liDiv").stop().animate({top:-height*((value[5])-Math.floor(value[5]/10)*10)},200); id.children("li.Li1").children("div.liDiv").stop().animate({top:-height*(Math.floor(value[5]/10))},200); id.children("li.Li2").children("div.liDiv").stop().animate({top:-height*((value[4])-Math.floor(value[4]/10)*10)},200); id.children("li.Li3").children("div.liDiv").stop().animate({top:-height*(Math.floor(value[4]/10))},200); id.children("li.Li4").children("div.liDiv").stop().animate({top:-height*((value[3])-Math.floor(value[3]/10)*10)},200); id.children("li.Li5").children("div.liDiv").stop().animate({top:-height*(Math.floor(value[3]/10))},200); if((value[5])-Math.floor(value[5]/10)*10==0){ id.children("li.Li0").children("div.liDiv").animate({top:-lenA},0); if(Math.floor(value[5]/10)==0){ id.children("li.Li1").children("div.liDiv").animate({top:-lenB},0); if((value[4])-Math.floor(value[4]/10)*10==0){ id.children("li.Li2").children("div.liDiv").animate({top:-lenA},0); if(Math.floor(value[4]/10)==0){ id.children("li.Li3").children("div.liDiv").animate({top:-lenB},0); if((value[3])-Math.floor(value[4]/10)*10==0){ id.children("li.Li4").children("div.liDiv").animate({top:-lenA},0); if(Math.floor(value[3]/10)==0){ id.children("li.Li5").children("div.liDiv").animate({top:-lenB},0); } } } } } } }/*定义结束*/ id.children("li.Li0").children("div.liDiv").html($("#Timera").html()); id.children("li.Li0").children("div.liDiv").css("top",-lenA); id.children("li.Li1").children("div.liDiv").html($("#Timerb").html()); id.children("li.Li1").children("div.liDiv").css("top",-lenB); id.children("li.Li2").children("div.liDiv").html($("#Timera").html()); id.children("li.Li2").children("div.liDiv").css("top",-lenA); id.children("li.Li3").children("div.liDiv").html($("#Timerb").html()); id.children("li.Li3").children("div.liDiv").css("top",-lenB); id.children("li.Li4").children("div.liDiv").html($("#Timera").html()); id.children("li.Li4").children("div.liDiv").css("top",-lenA); id.children("li.Li5").children("div.liDiv").html($("#Timerb").html()); id.children("li.Li5").children("div.liDiv").css("top",-lenB); startTime(); } function computingTime(value){ /*参数value单位毫秒 计算value毫秒可以化作多少时间格式 年year周week日day时hour分minute秒second*/ var year,week,day,hour,minute,second; var time = new Array(); year = Math.floor(value/31536000000); time[0]=year; if(year > 0){ value = value - year*31536000000; } week = Math.floor(value/604800000); time[1]=week; if(week > 0){ value = value - week*604800000; } day = Math.floor(value/86400000); time[2]=day; if(day > 0){ value = value - day*86400000; } hour = Math.floor(value/3600000); time[3]=hour; if(hour > 0){ value = value - hour*3600000; } minute = Math.floor(value/60000); time[4]=minute; if(minute > 0){ value = value - minute*60000; } second = Math.floor(value/1000); time[5]=second; return time; /*返回数值time[year,week,day,hour,minute,second]*/ } var obj2 = $("#Timer2"); var obj = $("#Timer"); Timer(obj,2014,2,13,3,51,21); Timer(obj2,2015,1,23,8,11,43); })(); </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。