2017/11/24

实用的JS实现倒计时效果

完整的代码如下，直接拷贝过去就能使用

<!DOCTYPE html>  

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>倒计时</title>  

<style type="text/css">  

h1{font-family:"微软雅黑";font-size:40px;margin:20px 0;;border-bottom:solid 1px #ccc;padding-bottom:20px;letter-spacing:2px;}    

.time-item strong{background:#C71C60;color:#fff;line-height:49px;font-size:36px;font-family:Arial;padding:0 10px;margin-right:10px;border-radius:5px;box-shadow:1px 1px 3px rgba(0,0,0,0.2);}  

#day_show{float:left;line-height:49px;color:#c71c60;font-size:32px;margin:0 10px;font-family:Arial, Helvetica, sans-serif;}  

.item-title .unit{background:none;line-height:49px;font-size:24px;padding:0 10px;float:left;}  

</style>  

<!--<script type="text/javascript" src="js/jquery.min.js"></script>-->  

<!--/** 微软压缩版引用地址 **/-->

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

<script type="text/javascript">  

  

$(function(){  

    countDown("2017/11/24 10:31:00","#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .second");  

      

});  

  

function countDown(time,day_elem,hour_elem,minute_elem,second_elem){  

    //if(typeof end_time == "string")  

    var end_time = new Date(time).getTime(),//月份是实际月份-1  

    current_time = new Date().getTime(),  

    sys_second = (end_time-new Date().getTime());  

    var timer = setInterval(function(){  

        if (sys_second > 0) {  

            sys_second -= 10;  

            var day = Math.floor((sys_second /1000/ 3600) / 24);  

            var hour = Math.floor((sys_second /1000/ 3600) % 24);  

            var minute = Math.floor((sys_second /1000/ 60) % 60);  

            var second = Math.floor(sys_second/1000 % 60);  

            var haomiao = Math.floor(sys_second%1000);  

            day_elem && $(day_elem).text(day);//计算天  

            $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时  

            $(minute_elem).text(minute<10?"0"+minute:minute);//计算分  后面可+'分'

            $(second_elem).text(second<10?"0"+second:second);// 计算秒  

            $("#haomiao").text(haomiao);// 计算毫秒  

        }else {

         $("#demo01").remove();//删除倒计时显示层

            clearInterval(timer);  

        }  

    }, 10);  

}  

</script>  

<div align="center" style="width:516px; margin:0 auto">  

<h1>倒计时</h1>  

  

<div class="time-item" id="demo01">  

    <strong id="day" class="day">0</strong>天  

    <strong id="hour" class="hour">0</strong>时  

    <strong id="minute" class="minute">0</strong>分  

    <strong id="second" class="second">0</strong>秒  

    <strong id="haomiao" class="second">0</strong>毫秒  

</div><!--倒计时模块-->  

</div>  

</body>  

</html>