利用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 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
js回文数的4种判断方法示例
Jun 04 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 array的学习笔记
2012/05/16 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
php实现微信扫码支付
2017/03/26 PHP
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
基于Python pip用国内镜像下载的方法
2018/06/12 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python实现logistic分类算法代码
2020/02/28 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
遗体告别仪式答谢词
2014/01/23 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
工作时间调整通知
2015/04/24 职场文书
党员违纪检讨书
2015/05/05 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
导游词之西递宏村
2019/12/10 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
浅谈Web Storage API的使用
2021/06/23 Javascript
实操Python爬取觅知网素材图片示例
2021/11/27 Python