程序不在大小勇皇，下面是自己寫(xiě)的一個(gè)模擬紅綠燈的程序
首先我們先確定功能：
1.要有顯示燈時(shí)間的地方
2.燈在剩余時(shí)間只有十秒的時(shí)候開(kāi)始閃爍
3.可以調(diào)整燈顯示的時(shí)間
4.燈按照紅-黃-綠-紅的順序切換
寫(xiě)的不好谋旦，希望朋友們可以提出寶貴意見(jiàn)。
下面是CSS代碼:

*{
    margin:0px;
    padding:0px;}
#all{
    width:300px;
    height:400px;
    border: thin solid #000000;
    position:relative;
    top:150px;
    left:400px;
    }
#left{
    width:100px;
    height:400px;
    border: thin solid #000000;
    float:left;
    }
#number{
    width:100px;
    height:100px;
    text-align:center;
    font-size:80px;
    }
#color{ 
    background-color:#000000;
    width:100px;
    height:300px;}
.lamp{
    height: 85px;
    width: 85px;
    border: thin solid #000000;
    border-radius:85px;
    padding:5px;
    background:gray;
    }
#right{
    width:195px;
    height:400px;
    border: thin solid #000000;
    float:right;
    background-image:url(text2.jpg);
    background-size:195px 400px;
    }
#control{
    margin-top:100px;
    font-family:"Times New Roman", Times, serif;
    font-size:20px;
    font-style:normal;
    text-align:center;
    font-weight: bold;
    text-decoration: blink;
    }
.time{  
    text-align:center;
    width:195px;
    height:25px;
    }
input{  
    width:180px;
    }

HTML標(biāo)簽：

<div id="all">
<div id="left">
<div id="number">
</div>
<div id="color">
<div class="lamp" id="red">
</div>
<div class="lamp" id="yellow">
</div>
<div class="lamp" id="green">
</div>
</div>
</div>
<div id="right">
<div id="control">
<p><label>紅燈時(shí)間：</label><br>
<input type="range" min="1" max="60" id="red_num">
<div id="red_num1" class="time"></div></p>

<p><label>黃燈時(shí)間：</label><br>
<input type="range" min="1" max="60" id="yellow_num">
<div id="yellow_num1" class="time"></div></p>

<p><label>綠燈時(shí)間：</label><br>
<input type="range" min="1" max="60" id="green_num">
<div id="green_num1" class="time"></div></p>

<p><button id="button" class="time">開(kāi)始</button></p>

</div>
</div>
</div>

JavaScript:

var number=document.getElementById("number");
var red=document.getElementById("red");
var yellow=document.getElementById("yellow");
var green=document.getElementById("green");
var red_num=document.getElementById("red_num");
var yellow_num=document.getElementById("yellow_num");
var green_num=document.getElementById("green_num");
var red_num1=document.getElementById("red_num1");
var yellow_num1=document.getElementById("yellow_num1");
var green_num1=document.getElementById("green_num1");
var button=document.getElementById("button");
var record,shijian,tiaodong,count;
//record：用于燈的轉(zhuǎn)換龙屉；shijian:被賦予燈亮的時(shí)間泳桦；tiaodong,count:被賦予setTimeout()函數(shù)澈侠，控制對(duì)應(yīng)活動(dòng)的開(kāi)始結(jié)束:

number.innerHTML=red_num.value;
red_num1.innerHTML=red_num.value;
yellow_num1.innerHTML=yellow_num.value;
green_num1.innerHTML=green_num.value;

red_num.onchange=function(){    
     if(!count){
   number.innerHTML=red_num.value;}
   //如果當(dāng)前紅燈正在“亮”則桥言，不影響本次紅燈顯示的時(shí)間
  red_num1.innerHTML=red_num.value;
          }

yellow_num.onchange=function(){ 
    yellow_num1.innerHTML=yellow_num.value;}

green_num.onchange=function(){  
    green_num1.innerHTML=green_num.value;}
    
function toRed(){
    clearTimeout(tiaodong);
    shijian = red_num.value;
    number.innerHTML=shijian;
    record=1;
    number.style.color="red";
    green.style.backgroundColor="gray";
    red.style.backgroundColor="red";
}

function toYellow(){
    clearTimeout(tiaodong);
    shijian = yellow_num.value;
    number.innerHTML=shijian;
    record=2;
    number.style.color="yellow";
    red.style.backgroundColor="gray";
    yellow.style.backgroundColor="yellow";}

function toGreen(){
    clearTimeout(tiaodong);
    shijian = green_num.value;
    number.innerHTML = shijian;
    record=3;
    number.style.color="green";
    green.style.backgroundColor="green";
    yellow.style.backgroundColor="gray";
   }

function start(){     
    if(shijian>10){
    count=setTimeout(start,1000);
    number.innerHTML = shijian ;
    shijian = shijian-1;}
    
    else{   
    count=setTimeout(start,1000);
    number.innerHTML = shijian ;
    shijian = shijian-1;
    tiaodong=setTimeout(function(){number.innerHTML=""},500);
     }
     
    if(number.innerHTML<=0){  
     switch(record){         
     case 1:toYellow();break; 
     case 2:toGreen();break;
     case 3:toRed();break;   
                     }
                   }
                 }
                 
button.onclick=function(){  
    shijian = red_num.value;
    number.innerHTML=shijian;
    number.style.color="red";
    red.style.backgroundColor="red";
    yellow.style.backgroundColor="gray";
    green.style.backgroundColor="gray";
    if(count)
    clearTimeout(count);
    record=1;
    start();
    }

看程序我覺(jué)得只要能理解，其中的邏輯過(guò)程谋国，就可以了槽地，如果朋友你看了之后有不能理解的地方，請(qǐng)聯(lián)系我芦瘾，我寫(xiě)的也不是最好的捌蚊，有更好的想法我們可以一起交流！