利用js定時器制作了一個紅綠燈

歡迎觀看《好看的博文沒人贊》——系列

先來一波效果圖，興趣是各位看官最好的使然，有興趣可以繼續往下面看：

按綠色按鈕啟動，紅燈亮起，順序依次為：紅-》黃-》綠-》黃-》紅

啟動效果圖：

按紅色按鈕暫停后，燈光保持不動：

各位看官能看到這里，肯定是由興趣繼續下去的，那咋們就開始代碼界面：

第一步：咋們需要一個黑色的全屏背景，一個紅綠燈桿，三盞燈（紅、黃、綠），兩個按鈕控制開關

        <div class="all">
			<div class="nos">
				<div id="no1" class="no1"></div>
				<div id="no3" class="no3"></div>
				<div id="no2" class="no2"></div>
			</div>
			<div class="gan"></div>
			<input type="button" id="open" class="open" onclick="b1()"/>
			<input type="button" id="close" class="close" onclick="b2()"/>
		</div>

第二步：css美化一下

讓它看起來第一眼是個紅綠燈

        <style>
			* {
				margin: 0px;
				padding: 0px;
			}

			.all {
				width: 100%;
				height: 80vh;
				background-color: black;
				padding-top: 20vh
			}

			.nos {
				width: 350px;
				border: 5px solid gray;
				display: flex;
				margin: auto;
				border-radius: 15em;
				padding: 10px;
			}

			.no1 {
				background-color: red;
				width: 100px;
				height: 100px;
				margin: auto;
				border-radius: 15em;
				background: radial-gradient(circle 100px,red,black);
				border: 2px solid red;
			}

			.no2 {
				background-color: green;
				width: 100px;
				height: 100px;
				margin: auto;
				border-radius: 15em;
				background: radial-gradient(circle 100px,green,black);
				border: 2px solid green;
			}

			.no3 {
				background-color: yellow;
				width: 100px;
				height: 100px;
				margin: auto;
				border-radius: 15em;
				background: radial-gradient(circle 100px,yellow,black);
				border: 2px solid yellow;
			}
			.gan{
				width: 3%;
				height: 50vh;
				margin: auto;
				border: 5px solid gray;
				border-radius: 0 0 1em 1em;
			}
			.open{
				width: 5px;
				height: 2vh;
				border: 1px solid gray;
				background-color: green;
				border-radius: 0 0.5em 0.5em 0;
				position: absolute;
				left: 52%;
				top: 65vh;
			}
			.close{
				width: 5px;
				height: 2vh;
				border: 1px solid gray;
				background-color: red;
				border-radius: 0 0.5em 0.5em 0;
				position: absolute;
				left: 52%;
				top: 68vh;
			}
		</style>

第三步：做動態效果了，燈亮起來的樣子，三個燈當然要準備三個方法了，誰亮咋用誰，他亮的時候，其他的不準亮

            function m1() {
				document.getElementById("no1").style.transition = "2s";
				document.getElementById("no1").style.boxShadow = "0px 0px 200px 100px red";
				document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green";
				document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow";
			}

			function m2() {
				document.getElementById("no2").style.boxShadow = "0px 0px 200px 100px green";
				document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red";
				document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow";
				document.getElementById("no2").style.transition = "2s";
			}

			function m3() {
				document.getElementById("no3").style.boxShadow = "0px 0px 200px 100px yellow";
				document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green";
				document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red";
				document.getElementById("no3").style.transition = "2s";
			}

第四步：邏輯地方來了，從誰開始亮，亮多久，第一亮了，第二個誰來亮，第三個，，，

紅->黃->綠->黃->紅，在這樣一直回圈

var num = 1;
			var count = 0;
			
			function ms() {
				switch (num) {
					case 1:
						m1();
						num++;
						break;
					case 2:
						m3();
						if (count==0) {
							num++;
							count++;
						} else{
							num--;
							count--;
						}
						break;
					case 3:
						m2();
						num--;
						break;
				}
			}
			var count1=0;
			var start = null;
			function b1(){
				if(count1==0){
					count1=1;
					start=setInterval(ms, 2000);
				}
			}
			function b2(){
				if (count1==1) {
					count1=0;
					clearInterval(start);
				}
			}

上面的b1是定時器啟動，并且是2s/次（2000ms/次）的速度的，b2是定時器關閉，看官想知道什么是定時器嗎？定時器就是以多少毫秒的速度回圈使用指定函式，這樣就可以實作2s/次的速度回圈亮燈了，最后依靠b2方法關閉定時器，讓它暫停回圈，

全部代碼在下面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			.all {
				width: 100%;
				height: 80vh;
				background-color: black;
				padding-top: 20vh
			}

			.nos {
				width: 350px;
				border: 5px solid gray;
				display: flex;
				margin: auto;
				border-radius: 15em;
				padding: 10px;
			}

			.no1 {
				background-color: red;
				width: 100px;
				height: 100px;
				margin: auto;
				border-radius: 15em;
				background: radial-gradient(circle 100px,red,black);
				border: 2px solid red;
			}

			.no2 {
				background-color: green;
				width: 100px;
				height: 100px;
				margin: auto;
				border-radius: 15em;
				background: radial-gradient(circle 100px,green,black);
				border: 2px solid green;
			}

			.no3 {
				background-color: yellow;
				width: 100px;
				height: 100px;
				margin: auto;
				border-radius: 15em;
				background: radial-gradient(circle 100px,yellow,black);
				border: 2px solid yellow;
			}
			.gan{
				width: 3%;
				height: 50vh;
				margin: auto;
				border: 5px solid gray;
				border-radius: 0 0 1em 1em;
			}
			.open{
				width: 5px;
				height: 2vh;
				border: 1px solid gray;
				background-color: green;
				border-radius: 0 0.5em 0.5em 0;
				position: absolute;
				left: 52%;
				top: 65vh;
			}
			.close{
				width: 5px;
				height: 2vh;
				border: 1px solid gray;
				background-color: red;
				border-radius: 0 0.5em 0.5em 0;
				position: absolute;
				left: 52%;
				top: 68vh;
			}
		</style>
		<script>
			function m1() {
				document.getElementById("no1").style.transition = "2s";
				document.getElementById("no1").style.boxShadow = "0px 0px 200px 100px red";
				document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green";
				document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow";
			}

			function m2() {
				document.getElementById("no2").style.boxShadow = "0px 0px 200px 100px green";
				document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red";
				document.getElementById("no3").style.boxShadow = "0px 0px 0px 0px yellow";
				document.getElementById("no2").style.transition = "2s";
			}

			function m3() {
				document.getElementById("no3").style.boxShadow = "0px 0px 200px 100px yellow";
				document.getElementById("no2").style.boxShadow = "0px 0px 0px 0px green";
				document.getElementById("no1").style.boxShadow = "0px 0px 0px 0px red";
				document.getElementById("no3").style.transition = "2s";
			}

			var num = 1;
			var count = 0;
			
			function ms() {
				switch (num) {
					case 1:
						m1();
						num++;
						break;
					case 2:
						m3();
						if (count==0) {
							num++;
							count++;
						} else{
							num--;
							count--;
						}
						break;
					case 3:
						m2();
						num--;
						break;
				}
			}
			var count1=0;
			var start = null;
			function b1(){
				if(count1==0){
					count1=1;
					start=setInterval(ms, 2000);
				}
			}
			function b2(){
				if (count1==1) {
					count1=0;
					clearInterval(start);
				}
			}

		</script>
	</head>
	<body>
		<div class="all">
			<div class="nos">
				<div id="no1" class="no1"></div>
				<div id="no3" class="no3"></div>
				<div id="no2" class="no2"></div>
			</div>
			<div class="gan"></div>
			<input type="button" id="open" class="open" onclick="b1()" />
			<input type="button" id="close" class="close" onclick="b2()" />
		</div>
	</body>
</html>

結尾：

本博客有該原始碼的下載，

制作不易，請各位看官點個小小的贊，在下感激不盡，你非要三連我也沒辦法（狗頭保命），哈哈，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/164600.html

標籤：其他

上一篇：基于HTML的飛機射擊游戲

下一篇：仿京東tab欄切換

js定時器實體紅綠燈效果圖