JS Date對象學習

1.Date 對象
類型使用自 CTU(Coordinated Universal Time,國際協調時間)1970 年 1 月 1 日午夜(零時)開始經過的毫秒數來保存日期。Date 類型保存
的日期能夠精確到 1970 年 1 月 1 日之前或之後的 285616 年。

2.對象的創建
var d = new Date();
3.字符串轉爲時間格式
也可以理解爲定義過去或者未來的時間(自定義時間點)
var d1= new Date(‘2017-10-24 22:22:22’);
var d2 = new Date(‘2020/10/24 11:11:11’);
4.獲取當前時間戳
var now = new Date();
alert(now);
返回的爲中國時區的標準時間格式;

5.事件對象常用api
getFullYear();
getMonth();
getDate();
getDay();
getHours()
getMinutes()
getSeconds()*

6、自定義日期格式輸出

function dataToString( now , sign ){
   	 //定義一個函數 功能是在小於10的數字前拼接0
   	 function toTwo( num ){
   	 	return num < 10 ? "0" + num : num;
   	 }
      //sign表示日期的拼接符號
      //設置sign的默認值  如果用戶傳遞sign參數 就使用用戶傳遞的參數
      //否則就使用默認值
      sign = sign || "-";設置sign的默認值
      //獲取日期的年月日
      var y = now.getFullYear();
      var m = now.getMonth() + 1;
      var d = now.getDate();
      //獲取日期的時分秒
      var h = toTwo( now.getHours() );
      var mi = toTwo( now.getMinutes() );
      var s = toTwo( now.getSeconds() );
      //定義自己的時間格式
      var str = y + sign + m + sign + d + " " + h + ":" + mi + ":" + s;
      return str;
  }

7、定時器

var i = 1;
	//啓動定時器
	var timer = setInterval( function(){
		console.log( i++ );
		if( i == 10 ){
			clearInterval( timer );//停止定時器
		}
	} , 1000 )

8、倒計時(重)
假設在2020年10月24日有一個活動,建立倒計時
思路:
1、獲取起始時間和結束時間
2、計算兩個時間段的時間差 t – 秒數
3、根據時間差 獲取剩餘的小時數 分鐘數 秒數
剩餘的小時 = parseInt(t/3600)
剩餘的分鐘 = parseInt(剩餘的秒數 / 60)
剩餘的秒數 = 總時間差秒數t - 小時消耗掉的秒數 剩餘的小時*3600
剩餘的秒數 = 總時間秒數%60
4、將得到的小時 分鐘 秒數 顯示到頁面
5、利用定時器 完成倒計時效果

html中的代碼

<body>
		<h1>距離您的商品下架倒計時 過期時間:2018-10-24 18:00:00</h1>
		<p id="p1"></p>
	</body>

JS中的代碼

//1、獲取起始時間和結束時間
	var start = new Date();//起始時間
	var end = new Date("2020-10-24 16:28:00");
	
	//2、計算兩個時間段的時間差
	var t = diff(start,end);//時間差 秒
	function showTime(){
		if( t < 0 ){
			p1.innerHTML = "活動過期了";
			return;
		}
		//3、根據時間差 獲取剩餘的小時數   分鐘數  秒數
		var h = parseInt( t/3600 );
		var m = parseInt( (t-h*3600)/60 );
		var s = parseInt( t - h*3600 - m*60 );
		//4、將得到的小時 分鐘 秒數 顯示到頁面上
		p1.innerHTML = h + "小時" + m + "分鐘" + s + "秒";
	}
	showTime();
	//5、利用定時器 完成倒計時效果
	var timer = setInterval( function(){
		t--;
		if( t < 0 ){
			p1.innerHTML = "活動過期了";
			clearInterval( timer );
		}else{
			showTime();
		}
	},1000 );
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章