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

最新推荐文章于 2022-04-15 10:29:34 发布

爱睡觉的小馨

最新推荐文章于 2022-04-15 10:29:34 发布

阅读量4.3k

点赞数 6

分类专栏： js

本文链接：https://blog.csdn.net/qq_45696288/article/details/111460489

版权

js 专栏收录该内容

24 篇文章 7 订阅

订阅专栏

<!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>

在这里插入图片描述

爱睡觉的小馨

关注

6
点赞
踩
42

收藏

觉得还不错? 一键收藏
打赏
0
评论
编写js实现红绿灯效果（亮灯的转换以及倒计时的显示）

<!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{
复制链接

扫一扫