利用js实现简易红绿灯


Posted in Javascript onOctober 15, 2020

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实现简易红绿灯

以上就是利用js实现简易红绿灯的详细内容,更多关于js 实现红绿灯的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 #Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 #Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 #Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 #Javascript
angular共享依赖的解决方案分享
Oct 15 #Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 #Javascript
js实现点击烟花特效
Oct 14 #Javascript
You might like
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
JS高级运动实例分析
2016/12/20 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python实现的简单抽奖系统实例
2015/05/22 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
料理师求职信
2014/01/30 职场文书
勾股定理课后反思
2014/04/26 职场文书
环保倡议书400字
2014/05/15 职场文书
公司门卫工作职责
2014/06/28 职场文书
社区服务活动小结
2014/07/08 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
保安2014年终工作总结
2014/12/06 职场文书
超市工作总结范文2014
2014/12/19 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
2015大学迎新标语
2015/07/16 职场文书
客户答谢会致辞
2015/07/30 职场文书
小学三年级作文之写景
2019/11/05 职场文书