新手做的jquery倒计时，求大神精简代码指正

2022-01-31 01:22:25

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;
    }

<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>

新手做的jquery倒计时，求大神精简代码指正

码农公寓

相关文章