红绿灯[][][][]

最新推荐文章于 2023-03-01 17:12:17 发布

原创最新推荐文章于 2023-03-01 17:12:17 发布 · 448 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

javaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何利用HTML结构，结合CSS样式和JavaScript来创建一个简单的红绿灯模拟效果。通过动态改变CSS类，实现红绿灯颜色的交替变化。

在这里插入图片描述

红绿灯

// 上代码

<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
  <style>
      * { margin: 0; padding:0}
      .box {
				width: 250px;
				height: 52px;
				padding: 15px 30px;
				border: 2px solid #ccc;
				/* border-radius: 16px; */
                border-radius: 50px;
				margin: 0 auto;
			}
			.box .count {
                /* overflow: hidden; */
                width: 60px;
                height: 50px;
				line-height: 50px;
				color: rgb(27, 4, 4);
				font-size: 50px;
				margin-left: 10px;
				border: 1px solid #fff
			}
			.box div {
				margin-left: 5px;
				float: left;
				width: 50px;
				height: 50px;
				border-radius: 50px;
				border: 1px solid #666;
			}
			.gray {
				background-color: #eee;
			}
			.red {
				background-color: red;
			}
			.yellow {
				background-color: yellow;
			}
			.green {
				background-color: #26ff00;
			}
  </style>
</head>
<body>
    <div class="box">
        <div id='red'></div>
        <div id='green'></div>
        <div id='yellow'></div>
        <div id='count' class='count'></div>
    </div>
<script type="text/javascript">
    function $(id){ return document.getElementById(id)}
    // 三种指示灯的数据 键值对存储数据
    var lamp= {
        red: {
            obj: $('red'),
            style: ['red', 'gray', 'gray'],
            timeOut: 30,
            next: 'green'
        },
        green: {
            obj: $('green'),
            style: ['gray', 'green', 'gray'],
            timeOut: 35,
            next: 'yellow'
        },
        yellow: {
            obj: $('yellow'),
            style: ['gray', 'gray', 'yellow'],
            timeOut: 5,
            next: 'red'
        },
        changeStyle(style){
            this.red.obj.className=style[0];
            this.green.obj.className= style[1];
            this.yellow.obj.className= style[2];
        }
    };
    var count = {
        obj:$('count'),
        change: function(num){
            this.obj.innerHTML= (num>=10)? num: '0'+num;
        }
    }
    // 初始化界面
    var now= lamp.green;//
    var timeout= now.timeOut;
    lamp.changeStyle(now.style);
    count.change(timeout);
    // setInterval()方法 计时器完成动态修改
    setInterval(function(){
        if(--timeout <= 0){ //根据count数值 条件操作div
            now= lamp[now.next];
            timeout= now.timeOut;
            lamp.changeStyle(now.style);
        }
        count.change(timeout);
    }, 1000 );
</script>
</body>

</html>