DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> javascript 學習筆記(四) 倒計時程序代碼
javascript 學習筆記(四) 倒計時程序代碼
編輯:JavaScript基礎知識     
首先看全部完整代碼:

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
html部分代碼:
可在文本框中輸入倒計時的時間,如果當前時間小於截止時間,則正常返回,反之,則返回距離截止日期到現在的時間
復制代碼 代碼如下:
<p>
<label for="deadline">截止日期</label>
<input type="text" value="2011-06-11" id="deadline" />
<input type="button" value="開始倒計時" onclick="window.setInterval('countDown(\'deadline\')', 1000)" />
</p>
<p id="showTime"></p>

javascript部分代碼:
復制代碼 代碼如下:
function countDown(endDate) {
var now = new Date();
var deadtime = document.getElementById(endDate);
var deadline = new Date(deadtime.value);
//本地時間與格林威治標准時間 (GMT) 的分鐘差
var timeDiff = now.getTimezoneOffset();
//此處有些不解,如果把分鐘差轉化成毫秒應該是timeDiff*60*1000,但是這樣返回的數據不正確!
var leave = Math.abs(deadline.getTime() - now.getTime() + timeDiff*60);
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var countDay = Math.floor(leave/day);
//var countHour = Math.floor((leave - day*countDay)/hour); 兩種計算思路
var countHour = Math.floor(leave/hour - countDay*24);
var countMinute = Math.floor(leave/minute) - countDay*24*60 - countHour*60;
var countSecond = Math.floor(leave/1000) - countDay*24*60*60 - countHour*60*60 - countMinute*60;
var outStr = "";
if(deadline < now) {
outStr = "距離"+deadtime.value+"已有"+countDay+"天"+countHour+"小時"+countMinute+"分"+countSecond+"秒";
} else {
outStr = "距離"+deadtime.value+"還差"+countDay+"天"+countHour+"小時"+countMinute+"分"+countSecond+"秒";
}
var showTime = document.getElementById("showTime");
showTime.innerHTML = outStr;
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved