JavaScript倒計時

原創

2020-02-22 06:40

做一個簡易的倒計時界面

下面先直接上代碼放在一個HTML頁面上

<style type="text/css">		
		body{
			background: url('timg.jpg') no-repeat center center fixed;
    		width:100%;
        	height:100%;
		    background-size: cover;
		}
		.main{
			position: absolute;
			width: 800px;
			height: 600px;
			top: 250px;
			left: 555px;
		}
		.title{
			font-size: 90px;
			font-weight: bold;
			color: white;
			height: 80px;
			line-height: 80px;
			text-align: center;
			letter-spacing: 40px;
			font-family: '楷體';
		}
		#time{
			margin-top: 200px;
			font-size: 60px;
			font-weight: bold;
			color: #000;
			height: 60px;
			line-height: 60px;
			text-align: center;
			letter-spacing: 20px;
			font-family: '楷體';		
		}
		span{
			color:#FDDB65 ;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="title">距離小年還有</div>
		<div id="time"></div>
	</div>
	<script type="text/javascript">
		var time = document.getElementById("time");
		function guonian(){
			let data = new Date();
			let oldTime = data.getTime();
		    let newDate = new Date('2020/1/17 00:00:00');
		    let newTime = newDate.getTime();
		    let second = Math.floor((newTime - oldTime) / 1000);
		    let day = Math.floor(second / 86400);
		    second = second % 86400;
		    let hours = Math.floor(second / 3600);
		    second = second % 3600;
		    let minute = Math.floor(second / 60);
		    second = second % 60;
		    time.innerHTML = `<span>${day}</span>天<span>${hours}</span>時<span>${minute}</span>分<span>${second}</span>秒`;
		}
		var time1 = setInterval(function(){
			guonian()
		},1000)			
	</script>

這裏分開說明一下各部分
CSS部分
樣式可以根據自己的需求去更改，這裏我們爲body設置平鋪滿另外我們的background屬性的內容可以放在一排去寫減少我們代碼的重複量我這裏幾個屬性分別代表 平鋪，背景圖片上下左右居中，定位fixed

HTML部分
由於我們的時間數據由JS寫入這裏不多說明

JavaScript部分
我們先獲得當前的時間對象以及設定結束時間的時間對象，分別獲得他們的毫秒總數去相減得到差值。我們的second取整獲得秒數，講秒數除以86400得到天數然後取餘獲得剩下的秒數後面依次獲得小時，分鐘，秒。最後用一個1S間隔的定時器將內容寫入HTML 。當然我們這裏可以加一個判斷當時間爲0時清空定時器