js定时器实现红绿灯效果

最新推荐文章于 2023-12-20 08:24:51 发布

Fixiaobai

最新推荐文章于 2023-12-20 08:24:51 发布

阅读量1.7k

点赞数 2

分类专栏：转载

原文链接：https://blog.youkuaiyun.com/qq_46223960/article/details/108968545

版权

转载专栏收录该内容

1 篇文章

订阅专栏

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