JavaScript實現倒計時功能

實現倒計時效果

1、核心算法:輸入的時間減去現在的時間就是剩餘的時間(即倒計時)但是不能拿着時分秒相減

注意:比如05分減去25分,結果會是負數

2、用時間戳來做,用戶輸入的時間總的毫秒數減去現在時間的總的毫秒數,得到的就是剩餘時間的毫秒數。

3、把剩餘的時間總的毫秒數換算成天、時、分、秒

轉換公式如下:

d = parseInt(總的秒數 / 60 / 60 / 24); //計算天數

h = parseInt(總的秒數 / 60 / 60 % 24); //計算小時

m = parseInt(總的秒數 / 60 % 60);    //計算分鐘

s = parseInt(總的秒數 % 60);          //計算秒數

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
		//倒計時效果
		//1、核心算法:輸入的時間減去現在的時間就是剩餘的時間,即倒計時,但是不能拿着時分秒相減,比如05分減去25分,結果會是負數
		//2、用時間戳來做,用戶輸入的時間總的毫秒數減去現在時間的總的毫秒數,得到的就是剩餘時間的毫秒數。
		//3、把剩餘的時間總的毫秒數換算成天、時、分、秒
		/* 轉換公式如下:
		d = parseInt(總的秒數 / 60 / 60 / 24); //計算天數
		h = parseInt(總的秒數 / 60 / 60 % 24); //計算小時
		m = parseInt(總的秒數 / 60 % 60);    //計算分鐘
		s = parseInt(總的秒數 % 60);		  //計算秒數 */
		function countDown(time) {
			var nowTime = +new Date(); //獲取當前時間的時間戳
			var inputTime = +new Date(time); //獲取輸入時間的時間戳
			var times = (inputTime - nowTime) / 1000; //獲取兩個時間相差的秒數
			var d = parseInt(times / 60 / 60 / 24); //計算天數
			d = d < 10 ? '0' + d : d;
			var h = parseInt(times / 60 / 60 % 24); //計算小時
			h = h < 10 ? '0' + h : h;
			var m = parseInt(times / 60 % 60); //計算分鐘
			m = m < 10 ? '0' + m : m;
			var s = parseInt(times % 60); //計算秒數
			s = s < 10 ? '0' + s : s;
			return d + '天' + h + '時' + m + '分' + s + '秒';
		}
		
		console.log(countDown('2020-6-19 11:30:00'));
		var date = new Date();
		console.log(date);
	</script>
	<body>
	</body>
</html>

 

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