JavaScript 日期對象 Date

通過三個例子,可以涵蓋 Date 的基本用法:


1.  動態的顯示當前的日期和時間格式

效果爲:2015年12月28日 星期一 14:09:53

參見下面 showTime 函數:

function showTime(){
	var nowDate=new Date();  //當前日期
	var year=nowDate.getFullYear();  //年
	var month=nowDate.getMonth()+1;  //月
	var date=nowDate.getDate();  //日
	var d=nowDate.getDay();  //星期
	var weekday=new Array(7);  //存儲星期字符串的數組
	weekday[0]="星期日";
	weekday[1]="星期一";
	weekday[2]="星期二";
	weekday[3]="星期三";
	weekday[4]="星期四";
	weekday[5]="星期五";
	weekday[6]="星期六";
	var h=nowDate.getHours();  //小時
	h=checkTime(h);  //規範化
	var m=nowDate.getMinutes();  //分鐘
	m=checkTime(m);
	var s=nowDate.getSeconds();  //秒
	s=checkTime(s);
	document.getElementById('time1').innerHTML=year+'年'+month+'月'+date+'日 '+weekday[d]+' '+h+':'+m+':'+s;  //顯示格式
	setTimeout(showTime,1000);  //1s後再次調用本函數
}
其中的 checkTime 函數用於規範化,如把“6”變爲“06”,函數如下:

function checkTime(i){
	if(i<10){
		i='0'+i;
	}
	return i;
}


2. 倒計時--還剩?天

效果爲:距離2022年北京冬奧會還有2230天

方法:用冬奧會的日期減去當前日期,再換算成天數即可,注意在相減之前用getTime()取毫秒數。

var curTime=new Date();  //當前日期
var OWG_Time=new Date("2022,2,4");  //冬奧會日期
var detaOWG_time=Math.ceil((OWG_Time.getTime()-curTime.getTime())/(24*60*60*1000));  //二者差值
document.getElementById('time2').innerHTML='距離2022年北京冬奧會還有 '+detaOWG_time+' 天';  //顯示


3. 倒計時--還剩?天?小時?分鐘?秒

效果爲:距離2016春節還有:41天9小時36分鐘59秒

調用以下的 countDown 函數即可:

function countDown(){
	var curTime=new Date();  //當前日期
	var Spring_Time=new Date("2016/2/8,00:00:00");  //春節日期
	var detaSpring_time=parseInt((Spring_Time.getTime()-curTime.getTime())/1000+1);  //差值,parseInt取整數部分
	if(detaSpring_time<=0){  //如果差值小於0,則不再倒計時,直接顯示新年快樂
		document.getElementById('time3').innerHTML='Happy New Year !!';
	}
	else{
		var Spring_d=parseInt(detaSpring_time/(24*60*60));  //剩多少天
		var Spring_h=parseInt(detaSpring_time/(60*60)%24);  //剩多少小時
		var Spring_m=parseInt(detaSpring_time/60%60);  //剩多少分鐘
		var Spring_s=parseInt(detaSpring_time%60);  //剩多少秒
		document.getElementById('time3').innerHTML='距離2016春節還有:'+Spring_d+'天'+Spring_h+'小時'+Spring_m+'分鐘'+Spring_s+'秒';  //顯示
		setTimeout(countDown,1000);  //1s後再次調用本函數
	}
}





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章