JS实现倒计时效果

 

如题，这是一个倒计时的demo

 

00天00时00分00秒
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time</title>
    <style>
    .time_num{
        color:#333;
        font-size:20px;
    }
    .time_num i{
        font-style:normal;
    }
    </style>
</head>
<body>
    <div id="time_num" class="time_num"> <i>0</i><i>0</i><span>天</span><i>0</i><i>0</i><span>时</span><i>0</i><i>0</i><span>分</span><i>0</i><i>0</i><span>秒</span> </div>
<script>
window.onload = function(){
    var start = setInterval(function(){show_time();},1000);
}

var elem = {
    end_time : new Date(2014,02,20,00,00),                     //结束时间
    time_num :  document.getElementById("time_num"),        //弹出窗
}

//倒计时间
function show_time(){
    var time =  Math.floor((elem.end_time - new Date())/1000);                    //剩余时间
    var day = Math.floor(time/(60 * 60 * 24));                                    //天数
    var hour = Math.floor((time-day*24*3600)/3600);                        //小时数
    var minute = Math.floor((time-hour*3600-day*24*3600)/60);        //分钟数
    var second = Math.floor(time-minute*60-hour*3600-day*24*3600);        //秒数
    
    if(elem.end_time>new Date()){
        var s = "<i>"+time_split(day)[0]+"</i><i>"+time_split(day)[1]+"</i><span>天</span><i>"+time_split(hour)[0]+"</i><i>"+time_split(hour)[1]+"</i><span>时</span><i>"+time_split(minute)[0]+"</i><i>"+time_split(minute)[1]+"</i><span>分</span><i>"+time_split(second)[0]+"</i><i>"+time_split(second)[1]+"</i><span>秒</span>";
    
        elem.time_num.innerHTML = s;
    }else{
        elem.time_num.innerHTML = "<i>0</i><i>0</i><span>天</span><i>0</i><i>0</i><span>时</span><i>0</i><i>0</i><span>分</span><i>0</i><i>0</i><span>秒</span>";
    }
    
}

function time_split(n){
    if(n>=10){
        return n.toString().split("");
    }else{
        return [0,n];
    }
}
</script>
</body>
</html>

 

posted @ 2014-03-19 13:01  Joy Ho  阅读(504)  评论(0)    收藏  举报