老師版本
var?input?=?document.querySelectorAll('#fill_in?input');
var?target?=?document.querySelector('#target?strong');
var?go?=?document.querySelector('#go');
var?ps?=?document.querySelectorAll('#date?p');
var?nowDate?=?new?Date();
var?wishDate?=?null;
var?timer?=?null;
var?onOff?=?true;
//初始化
init();
/**?
?*?可以利用日期對(duì)象相減额获，得到他們之間的毫秒數(shù)的差值
?*?
*/
go.onclick?=?function(){
????if?(!onOff){
????????return;
????}
????onOff?=?false;
????var?year?=?input[0].value;
????var?month?=?input[1].value?-?1;
????var?day?=?input[2].value;
????wishDate?=?new?Date(year,?month,?day);
????//把獲取到的差值毫秒數(shù)換算成對(duì)應(yīng)的天數(shù)
????timer?=?setInterval(function(){
????????upDate();
????},1000);
????upDate();
}
//初始化
function?init(){
????input[0].value?=?nowDate.getFullYear();
????input[1].value?=?nowDate.getMonth()?+?1;
????input[2].value?=?nowDate.getDate();
????target.innerHTML?=?setFormat();
}
//設(shè)置格式
function?setFormat(){
????var?txt?=?nowDate.getFullYear()?+?'年'?+?(nowDate.getMonth()?+?1)?+?'月'?+?nowDate.getDate()?+?'日';
????return?txt;
}
//根據(jù)差值計(jì)算出對(duì)應(yīng)的天數(shù)
function?countDate(dis){
????var?timeArr?=?[];
????var?oneDay?=?1000?*?60?*?60?*?24?;
????var?oneHour?=?1000?*?60?*?60;
????var?oneMinute?=?1000?*?60;
????var?oneSecond?=?1000;
????timeArr[0]?=?parseInt(dis?/?oneDay);
????dis?=?dis?%?oneDay;
????timeArr[1]?=?parseInt(dis?/?oneHour);
????dis?=?dis?%?oneHour;
????timeArr[2]?=?parseInt(dis?/?oneMinute);
????dis?=?dis?%?oneMinute;
????timeArr[3]?=?parseInt(dis?/?oneSecond);
????//?console.log(timeArr);
????for?(var?i?=?0;?i?<?timeArr.length;i++){
????????timeArr[i]?=?fillZero(timeArr[i]);
????}
????console.log(timeArr);
????for?(var?i?=?0;?i?<?timeArr.length;i++){
????????ps[i].innerHTML?=?timeArr[i];
????}
????//?console.log(days,?hours,?minutes,?seconds);
}
//補(bǔ)零
function?fillZero(value){
????var?str?=?''?+?value;
????//?console.log(str.length);
????if(str.length<2){
????????str?=?'0'?+?str;
????}
????return?str;
}
function?upDate(){
????nowDate?=?new?Date();
????var?dis?=?wishDate?-?nowDate;
????if?(dis?<=?0)?{
????????alert('不需要執(zhí)行倒計(jì)時(shí)');
????????clearInterval(timer);
????????onOff?=?true;
????????return;
????}
????countDate(dis);
}
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>倒計(jì)時(shí)?-?妙味課堂?-?www.miaov.com</title>
<link?href="style.css"?rel="stylesheet"?type="text/css"?/>
</head>
<body>
<div?id="miaov">
????<div?id="fill_in">
????????<span?class="title">請(qǐng)輸入：</span>
????????<input?type="text"?class="long_text"?value="2019"?/>
????????<span?class="space1">年</span>
????????<input?type="text"?class="text"?value="9"?/>
????????<span?class="space2">月</span>
????????<input?type="text"?class="text"?value="17"?/>
????????<span?class="space3">日</span>
????</div>
????<a?href="javascript:;"?id="go"?class="go"></a>
????<a?href="javascript:;"?id="go2"?class="active"></a>
????<p?id="target">
????????現(xiàn)在距離?-
????????<strong>2012年12月22日</strong>
????????-?還剩：
????</p>
????<div?id="date">
????????<p?id="day">000</p>
????????<p?id="hour">00</p>
????????<p?id="min">00</p>
????????<p?id="sec">00</p>
????</div>
????<h1?title="妙味課堂-www.miaov.com"><a?).innerHTML?=?second;
????????}
????}
})();
</script>
</body>
</html>
