欢迎来到GM源码之家!会员签到可免费领金币,开通会员下载免金币(本站金币1:10)
广告位出租
广告位招租
利用js实现简易红绿灯的代码
时间:2020-10-18 来源:脚本之家 作者:秩名 浏览: 次  推荐  打印
广告位出租

这篇文章主要介绍了利用js实现简易红绿灯,帮助大家更好的利用js制作特效,美化网页,感兴趣的朋友可以了解下


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 实现红绿灯的资料请关注脚本之家其它相关文章!


来源:脚本之家

(责任编辑:GM源码之家)

转载请注明来源:https://www.gmyuanma.com/jsjc/4125.html

会员头像
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

郑重声明:
本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
我们不承担任何技术及版权问题,且不对任何资源负法律责任。
如无法下载,联系站长索要。
如有侵犯您的版权,请及时【联系我们】我们尽快处理。