JS简单实用的倒计时效果

没有事研究了下倒计时的效果，因此自己练习了一下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    ul,li{list-style: none;}
    #show_time{color: #f00;font-size: 24px;font-weight: bold;}
</style>
</head>
<body>
<div id="show_time">

</div>
<script type="text/javascript"> 
function countdown(){
    var show_time = document.getElementById("show_time");
    endtime = new Date("12/31/2012 23:59:59");//结束时间
    today = new Date();//当前时间
    delta_T = endtime.getTime() - today.getTime();//时间间隔
    if(delta_T < 0){
        clearInterval(auto);
        show_time.innerHTML = "倒计时已经结束";
    }
    window.setTimeout(countdown,1000);
    total_days = delta_T/(24*60*60*1000);//总天数
    total_show = Math.floor(total_days);//实际显示的天数
    total_hours = (total_days - total_show)*24;//剩余小时
    hours_show = Math.floor(total_hours);//实际显示的小时数
    total_minutes = (total_hours - hours_show)*60;//剩余的分钟数
    minutes_show = Math.floor(total_minutes);//实际显示的分钟数
    total_seconds = (total_minutes - minutes_show)*60;//剩余的分钟数
    seconds_show = Math.floor(total_seconds);//实际显示的秒数
    show_time.innerHTML = "距离结束还有:" + total_show + "天" + hours_show + "时" + minutes_show + "分" + seconds_show + "秒";
}
countdown();
</script>
</body>
</html>

posted on 2012-08-30 16:02 ゞ╃漃瘼青賰阅读(1605) 评论(0) 编辑收藏举报