红绿灯

程序不在大小，下面是自己写的一个模拟红绿灯的程序
首先我们先确定功能：
1.要有显示灯时间的地方
2.灯在剩余时间只有十秒的时候开始闪烁
3.可以调整灯显示的时间
4.灯按照红-黄-绿-红的顺序切换
写的不好，希望朋友们可以提出宝贵意见。
下面是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标签：

<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>红灯时间：</label><br>
<input type="range" min="1" max="60" id="red_num">
<div id="red_num1" class="time"></div></p>

<p><label>黄灯时间：</label><br>
<input type="range" min="1" max="60" id="yellow_num">
<div id="yellow_num1" class="time"></div></p>

<p><label>绿灯时间：</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">开始</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：用于灯的转换；shijian:被赋予灯亮的时间；tiaodong,count:被赋予setTimeout()函数，控制对应活动的开始结束:

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;}
   //如果当前红灯正在“亮”则，不影响本次红灯显示的时间
  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();
    }

看程序我觉得只要能理解，其中的逻辑过程，就可以了，如果朋友你看了之后有不能理解的地方，请联系我，我写的也不是最好的，有更好的想法我们可以一起交流！