js定時器範例紅綠燈效果圖
2020-10-09 16:00:37
利用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>
結尾：
本部落格有該原始碼的下載。
製作不易，請各位看官點個小小的贊，在下感激不盡，你非要三連我也沒辦法（狗頭保命），哈哈。