利用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 相关文章推荐
javascript 命名规则 变量命名规则
Feb 25 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
详解jQuery中的easyui
Sep 02 jQuery
vue-cli3添加模式配置多环境变量的方法
Jun 05 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调用数据库的存贮过程!
2006/10/09 PHP
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
js下拉菜单语言选项简单实现
2013/09/23 Javascript
AngularJS语法详解
2015/01/23 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
利用Python实现图书超期提醒
2016/08/02 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
人工神经网络算法知识点总结
2019/06/11 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
聚美优品恶搞广告词
2014/03/14 职场文书
培训通知书模板
2015/04/17 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
Python 如何实现文件自动去重
2021/06/02 Python