Question

我已经使用JQuery构建了交通信号灯模拟，但是我正在努力了解我使用的代码。任何人都可以解释该功能，或者也许建议另一种方法来获得相同的结果？

HTML：

<div class="trafficlight">
  <div class="box">
    <div class="red light" id="redlight"></div>
    <div class="orange light" id="orangelight"></div>
    <div class="green light" id="greenlight"></div>
  </div>            
</div>

JS：

<script>
  //lights
  function redorange() {
    $('#orangelight').css('opacity', 1)
  };

  function green() {
    $('#redlight').css('opacity', 0.4)
    $('#orangelight').css('opacity', 0.4)
    $('#greenlight').css('opacity', 1)
    clearInterval(first);
  };

  function orange() {
    $('#orangelight').css('opacity', 1)
    $('#greenlight').css('opacity', 0.4)
    clearInterval(second);
  };

  function red() {
    $('#redlight').css('opacity', 1)
    $('#orangelight').css('opacity', 0.4)
    clearInterval(third);
  }; 

  //var first = setInterval(redorange, 4000);

  var second = setInterval(green, 5000);

  var third = setInterval(orange, 8000);

  var fourth = setInterval(red, 10000);
</script>

Answer 1

CSS中的opacity属性指定元素的透明度。基本用途：div {不透明度：0.5； }不透明度的默认初始值为1（100％不透明）。不透明度不是继承的，而是因为父级具有适用于其中所有内容的不透明度。

详细了解here

Answer 2

$('#orangelight').css('opacity', 1)

将不透明度<div class="orange light" id="orangelight"></div>更改为1

clearInterval(first);

从时间间隔“第一”（var first = setInterval(redorange, 4000)）停止时间

var fourth = setInterval(red, 10000);

为变量“第四”设置间隔，直到10000毫秒后调用函数“ orange（）”。

请注意，clearInterval(first);将导致错误，并且由于var first = ...已被注释掉，因此您的代码无法使用，因此'first'是未定义的。

如果您想了解有关jQuery的更多信息，请看一下   docs：https://api.jquery.com/

或查看https://www.codecademy.com/，以更多地了解JS。

我不明白这个功能

2 个答案: