编写js实现红绿灯效果（亮灯的转换以及倒计时的显示）

2021-04-10 10:02:30 阅读：204 来源： 互联网

标签：gray style obj 红绿灯亮灯 yellow js timeout red

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        #box{
            width: 250px;
            height: 52px;
            margin: 30px auto;
            padding: 15px 30px;
            border: 2px solid #ccc;
            border-radius: 15px;
        }
        #box .count{
            width: 60px;
            color: #666;
            font-size: 280%;
            line-height: 50px;
            margin-left: 5px;
            padding-left: 6px;
            border: 1px solid #fff;
        }
        #box div{
            width: 50px;
            height: 50px;
            border-radius: 50px;
            border: 1px solid #666;
            float: left;
            margin-left: 5px;
        }
        .gray{
            background-color: #eee;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: #26ff00;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
  
    

</head>
<body>
    

        <div id="box">
            <div id="red"></div>
            <div id="yellow"></div>
            <div id="green"></div>
            <div id="count" class="count"></div>
        </div>



       <script>
           var lamp = {
               red:{
                   obj:document.getElementById("red"),
                   timeout:3,
                   style:["red","gray","gray"],
                   next:"green"
               },
               yellow:{
                   obj:document.getElementById("yellow"),
                   timeout:5,
                   style:["gray","yellow","gray"],
                   next:"red"
               },
               green:{
                   obj:document.getElementById("green"),
                   timeout:3,
                   style:["gray","gray","green"],
                   next:"yellow"
               },
               changeStyle(style){
                   this.red.obj.className=style[0];
                   this.yellow.obj.className=style[1];
                   this.green.obj.className=style[2];
               }
           };
           //倒计时
           var count = {
               obj:document.getElementById("count"),
               change:function(num){
                   this.obj.innerHTML = (num<10) ? ("0"+num) : num ;//this表示的是count
                }
           };
           //初始状态
           var now = lamp.green;
           var timeout = now.timeout;
           lamp.changeStyle(now.style);
           count.change(timeout);
           
           setInterval(function(){
               if(--timeout<=0){
                   now = lamp[now.next];
                   timeout = now.timeout;
                   lamp.changeStyle(now.style);
               }
               count.change(timeout);
           },1000);
       </script> 



</body>
</html>

在这里插入图片描述

标签：gray,style,obj,红绿灯,亮灯,yellow,js,timeout,red
来源： https://blog.csdn.net/qq_45696288/article/details/111460489

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

编写js实现红绿灯效果（亮灯的转换以及倒计时的显示）