利用js实现简易红绿灯

作者:日天达人 时间:2024-04-22 22:30:02 

HTML代码:

在一个div容器内,设置3个span


<body>
<div id="i1">
 <span class="light red_light"></span>
 <span class="light yellow_light"></span>
 <span class="light green_light"></span>

</div>

CSS代码:


<style>
   .red_light {
     width: 200px;
     height: 200px;
     border-radius: 50%;
     margin-left: 10px;
     display: inline-block;
     background-color: red;
   }

.yellow_light {
     width: 200px;
     height: 200px;
     border-radius: 50%;
     margin-left: 10px;
     display: inline-block;
     background-color: yellow;
   }

.green_light {
     width: 200px;
     height: 200px;
     border-radius: 50%;
     margin-left: 10px;
     display: inline-block;
     background-color: green;
   }

.light {
     width: 200px;
     height: 200px;
     background-color: #777777;
     border-radius: 50%;
     margin-left: 10px;
     display: inline-block;
   }

#i1 {
     width: 660px;
     height: 200px;
     margin: 0 auto;
     border: black 10px solid;
   }

</style>

JS代码


<script>
 function l() {
   r_l()//红灯亮
   setTimeout(y_l, 1000);//黄灯一秒后亮
   setTimeout(r_l, 1000);//黄灯亮的同时关闭红灯
   setTimeout(g_l, 2000);//绿灯两秒后亮
   setTimeout(y_l, 2000);//绿灯亮,黄灯熄
   setTimeout(g_l, 3000);//三秒后,红灯熄
 }

function r_l() {
   //获取红灯
   let r = document.getElementsByClassName('red_light')[0];
   //toggle函数,如果有该属性,则去除,没有该属性,则添加
   r.classList.toggle('light')
 }

function g_l() {
   //同上
   let r = document.getElementsByClassName('green_light')[0];
   r.classList.toggle('light')
 }

function y_l() {
   //同上
   let r = document.getElementsByClassName('yellow_light')[0];
   r.classList.toggle('light')
 }

//红灯10秒,黄灯2秒,绿灯10秒

l(); //先执行函数
 window.onload = function () {
   t1 = setInterval(l, 3000)//每隔三秒重复执行函数
 };
//每隔三秒的时间是因为每个灯各闪一秒,如果改变了灯的持续时间,循环时间也要修改

</script>

运行效果

利用js实现简易红绿灯

来源:https://www.cnblogs.com/98WDJ/p/10685559.html#4527173

标签:js,红绿灯
0
投稿

猜你喜欢

  • MSSQL 2000 使用帮助(sql server简明教程)

    2024-01-22 06:17:34
  • pandas中df.groupby()方法深入讲解

    2024-01-01 15:30:24
  • python使用正则表达式匹配字符串开头并打印示例

    2021-07-02 00:52:13
  • 胶水语言Python与C/C++的相互调用的实现

    2021-01-16 20:06:49
  • Python入门教程(十七)Python的While循环

    2022-07-31 13:42:27
  • Python基于pygame实现单机版五子棋对战

    2021-02-26 05:53:54
  • MySQL图形化管理工具Navicat安装步骤

    2024-01-29 05:00:45
  • MySQL查看和修改时区的方法

    2024-01-15 05:42:33
  • 通过源码分析Golang cron的实现原理

    2023-06-15 23:49:24
  • python基础学习之组织文件

    2022-04-08 21:47:23
  • VMware workstation16 中Centos7下MySQL8.0安装过程及Navicat远程连接

    2024-01-21 12:08:47
  • 如何提升JavaScript的运行速度(DOM篇)[译]

    2009-02-25 12:24:00
  • 使用Python的package机制如何简化utils包设计详解

    2021-08-14 04:21:06
  • PHP中number_format()函数的用法讲解

    2023-06-02 15:48:12
  • 使用pytorch实现可视化中间层的结果

    2022-12-11 03:30:24
  • SpringBoot+Mybatis-Plus实现mysql读写分离方案的示例代码

    2024-01-17 02:13:32
  • Hello! 404

    2010-09-06 13:37:00
  • asp更改Windows2000管理者密码?

    2010-06-26 11:03:00
  • 界面内容优化的层次

    2007-11-06 13:07:00
  • OBJECTPROPERTY与sp_rename更改对象名称的介绍

    2012-01-29 18:04:39
  • asp之家 网络编程 m.aspxhome.com