利用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/qianduan/166632.html
標籤：其他