利用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>

结尾：

本博客有该源码的下载。

制作不易，请各位看官点个小小的赞，在下感激不尽，你非要三连我也没办法（狗头保命），哈哈。

js定时器实例红绿灯效果图

利用js定时器制作了一个红绿灯

先来一波效果图，兴趣是各位看官最好的使然，有兴趣可以继续往下面看：

各位看官能看到这里，肯定是由兴趣继续下去的，那咋们就开始代码界面：

第一步：咋们需要一个黑色的全屏背景，一个红绿灯杆，三盏灯（红、黄、绿），两个按钮控制开关

第二步：css美化一下

第三步：做动态效果了，灯亮起来的样子，三个灯当然要准备三个方法了，谁亮咋用谁，他亮的时候，其他的不准亮

第四步：逻辑地方来了，从谁开始亮，亮多久，第一亮了，第二个谁来亮，第三个。。。

猜你喜欢

js定时器实例红绿灯效果图

利用js定时器制作了一个红绿灯

先来一波效果图，兴趣是各位看官最好的使然，有兴趣可以继续往下面看：

各位看官能看到这里，肯定是由兴趣继续下去的，那咋们就开始代码界面：

第一步：咋们需要一个黑色的全屏背景，一个红绿灯杆，三盏灯（红、黄、绿），两个按钮控制开关

第二步：css美化一下

第三步：做动态效果了 ，灯亮起来的样子，三个灯当然要准备三个方法了，谁亮咋用谁，他亮的时候，其他的不准亮

第四步：逻辑地方来了，从谁开始亮，亮多久，第一亮了，第二个谁来亮，第三个。。。

猜你喜欢

第三步：做动态效果了，灯亮起来的样子，三个灯当然要准备三个方法了，谁亮咋用谁，他亮的时候，其他的不准亮