简单的倒计时效果

前言：倒计时效果在电商平台中用到的非常广泛，今天感谢程童鞋分享了一个倒计时的效果给我，趁着上午不忙，赶紧的研究一下，现将这个功能分享给大家。

一、语法归纳注解参考

1. JavaScript Date（日期）对象
Date() 返回当日的日期和时间。
getTime() 返回时间间隔内的毫秒数。

2. JavaScript floor() 方法
floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。

3. JavaScript NaN 属性
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。
提示：请使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

二、主要代码内容

效果图：

<div class="timer">
    <span>倒计时：</span>
    <div class="content">
        <input type="text" id="time_h"> 
        <span class="mao">:</span> 
        <input type="text" id="time_m"> 
        <span class="mao">:</span> 
        <input type="text" id="time_s">
    </div>
</div>

<style type="text/css">
    .timer span{
        color:#17B4EB;
    }           
    .timer input{
        width:30px;
        height:30px;
        line-height:30px;
        text-align: center;
        border:1px solid #DEDEDE;
        color: #FF7200;
        font-size: 14px;
    }
</style>

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
                show_time();

            }); 
            function show_time(){ 
                var myTimer;
                var time_start = new Date().getTime(); //设定当前时间
                var time_end =  new Date("2016/01/07 00:00:00").getTime(); //设定目标时间
                // 计算时间差 
                var time_distance =time_end - time_start; 
                if(time_distance<0){
                    clearTimeout(myTimer);
                    $("#time_h").val('00'); 
                    $("#time_m").val('00'); 
                    $("#time_s").val('00'); 
                }else{
                    // 天
                    /*var int_day = Math.floor(time_distance/86400000) 
                    time_distance -= int_day * 86400000; */
                    // 时
                    var int_hour =Math.floor(time_distance/3600000);
                    time_distance -= int_hour * 3600000; 
                    // 分
                    var int_minute = Math.floor(time_distance/60000); 
                    time_distance -= int_minute * 60000; 
                    // 秒 
                    var int_second = Math.floor(time_distance/1000) ;
                    // 时分秒为单数时、前面加零 
                    /*if(int_day < 10){ 
                        int_day = "0" + int_day; 
                    } */
                    if(int_hour < 10){ 
                        int_hour = "0" + int_hour; 
                    }
                    if(int_minute < 10){ 
                        int_minute = "0" + int_minute; 
                    } 
                    if(int_second < 10){
                        int_second = "0" + int_second; 
                    } 
                    // 显示时间 
                    /*$("#time_d").val(int_day);*/ 
                    $("#time_h").val(int_hour);
                    $("#time_m").val(int_minute);
                    $("#time_s").val(int_second);
                    // 设置定时器
                    myTimer=setTimeout("show_time()",1000); 
                }
            }
</script>