原生js實現倒計時

html代碼：

<div class="box">距離下班還有:<span>01:01:30</span></div>

css代碼：

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 600px;
    height: 40px;
    margin: 30px auto;
    text-align: center;
    line-height: 40px;
    font-size: 26px;
    font-weight: bold;
    border: 2px dashed darkred;
    background: lightcyan;
}
.box span{
    padding-left: 10px;
    color: darkblue;
}
js代碼：
var span =

document.getElementsByClassName('box')[0].getElementsByTagName('span')[0];

var timer = window.setInterval(record,1000);
function record(){
var curDate = new Date();//獲取當前的時間

var targetDate = new Date('2016/09/22 18:14:00'); //目標時間，先轉化成時間格式的對象才能使用getTime()方法
var curDate1970 = curDate.getTime(); //當前時間距離1970的ms數
var targetDate1970 = targetDate.getTime(); //目標距離1970的ms
var time = targetDate1970 - curDate1970; //時間差
//換算單位把time換算成h/m/s
//先換算成小時
var h = Math.floor( time/(1000*60*60) ); // 向下取整
// 換算分鐘  => 須要把h小時所佔用的ms數減去，而後再換算分鐘
var m = Math.floor( (time - h*60*60*1000)/(1000*60) );
// 換算s  => 把小時和分鐘所佔用的ms數都減去，而後再換算成s
var s = Math.floor( (time - h*60*60*1000 - m*60*1000)/1000 );
if(h + m + s <= 0 ){
    window.clearInterval(timer);
    span.innerHTML = "00:00:00"
    return;
}
span.innerHTML = addZero(h) + ":" + addZero(m) + ":" + addZero(s);
}

function addZero(n){ //給不足10的數前面添加一個0
    return n < 10 ? '0' + n : n;
}

//date.getTime(); //當前的這個date時間距離1970年1月1日 8點的毫秒數

注：var date2 = new Date('2016/09/24 17:00:00');console.log(date2); //若是在new的過程當中括號內添加了一個時間格式的字符串，那麼就是把這個字符串轉化成時間對象.而後就可使用getFullYear()等方法了date2.getFullYear();