前端學習-js實現倒計時

效果

以5秒爲例，點擊開始倒計時並變色，結束彈窗提示。

純js實現

		<script>	
			var p = document.createElement("p");
			var time = document.createTextNode("5");
			p.appendChild(time);
			p.id = 'clock';
			document.body.appendChild(p);
			
			var btn = document.createElement("button");
			var text = document.createTextNode("點擊開始倒計時");
			btn.appendChild(text);
			btn.id='btn';
			document.body.appendChild(btn);
			btn.onclick= countdown;	

			function countdown() {
				var time = 5;
				var interval = setInterval(function() {
					time -= 1;					
					document.getElementById("clock").innerHTML = time;
					if (time == 0) {
						clearInterval(interval);
						alert("1分鐘時間到");
						document.getElementById("clock").style.color= "#000000";
						document.getElementById("clock").style.borderColor= "#000000";
						document.getElementById("clock").innerHTML = 5;
					} else {
						document.getElementById("clock").innerHTML = time;
						document.getElementById("clock").style.color= "#E83E8C";
						document.getElementById("clock").style.borderColor= "#E83E8C";
					}
				}, 1000)

			}
		</script>

css

#clock {
	font-size: 20px;
	width: 50px;
	height: 50px;
	text-align: center;
	color: #000000;
	border: 2px solid #000000;

}