如何解释这些JavaScript行？_Javascript_Html_Css_Indexing_Integer

如何解释这些JavaScript行？

javascript html css indexing

如何解释这些JavaScript行？,javascript,html,css,indexing,integer,Javascript,Html,Css,Indexing,Integer,light和order都是包含状态及其显示时间段的数组不过，我不太确定索引或“sId”的作用。有人能解释一下吗？该代码更改交通灯的顺序。代码可以工作，但我想知道lightIndex的功能，因为当我更改它时，它就不工作了 <!DOCTYPE html> <html> <style type="text/css"> .light { height: 30px; width: 30px; border-style: solid;

light

和

order

都是包含状态及其显示时间段的数组

不过，我不太确定索引或“sId”的作用。有人能解释一下吗？该代码更改交通灯的顺序。代码可以工作，但我想知道lightIndex的功能，因为当我更改它时，它就不工作了

    <!DOCTYPE html>
<html>
<style type="text/css">
.light {
    height: 30px;
    width: 30px;
    border-style: solid;
    border-width: 2px;
    border-radius: 25px;
}
.lightRed {
    background-color: red;
}
.lightYellow {
    background-color: yellow;
}
.lightGreen {
    background-color: green;
}
</style>
<body>
<div id="trafficLight">
    <div>Click to Start and Stop</div>
    <div class="light" id="Red"></div>
    <div class="light" id="Yellow"></div>
    <div class="light" id="Green"></div>
</div>
<button type="button" onclick="changeState()">Change Lights</button>
<button type="button" onclick="changeState()">automatic</button>
<script>
var changeState = (function () {
    var state = 0,
        lights = ["Red", "Yellow", "Green"],
        lightsLength = lights.length,
        order = [
            [7000, "Red"],
            [2000, "Red", "Yellow"],
            [7000, "Green"],
            [2000, "Yellow"]
        ],
        orderLength = order.length,
        lightIndex,
        orderIndex,
        sId;

    return function (stop) {
        if (stop) {
            clearTimeout(sId);
            return;
        }

        var light,
        lampDOM;

        for (lightIndex = 0; lightIndex < lightsLength; lightIndex += 1) {
            light = lights[lightIndex];
            lightDOM = document.getElementById(light);
            if (order[state].indexOf(light) !== -1) {
                lightDOM.classList.add("light" + light);
            } else {
                lightDOM.classList.remove("light" + light);
            }
        }

        sId = setTimeout(changeState, order[state][0]);
        state += 1;
        if (state >= orderLength) {
            state = 0;
        }
    };
}());

document.querySelector('change Lights', 'automatic').addEventListener("click", (function () {
    var state = false;

    return function () {
        changeState(state);
        state = !state;
    };
}()), false);
</script>
</body>
</html>


.光{
高度：30px；
宽度：30px；
边框样式：实心；
边框宽度：2倍；
边界半径：25px；
}
.浅红色{
背景色：红色；
}
.浅黄色{
背景颜色：黄色；
}
.浅绿色{
背景颜色：绿色；
}
单击以开始和停止
换灯
自动的
var changeState=（函数（）{
var状态=0，
灯光=[“红色”、“黄色”、“绿色”]，
lightsLength=lights.length，
订单=[
[7000，“红色”]，
[2000，“红色”、“黄色”]，
[7000，“绿色”]，
[2000，“黄色”]
],
orderLength=order.length，
lightIndex，
订单索引，
sId；
返回功能（停止）{
如果（停止）{
清除超时（sId）；
回来
}
var light，
灯塔；
对于（lightIndex=0；lightIndex=订单长度）{
状态=0；
}
};
}());
document.querySelector（'change Lights'，'automatic'）。addEventListener（'click'，（函数）（）{
var状态=假；
返回函数（）{
变更状态（状态）；
状态=！状态；
};
}（）），假）；

lightIndex

和

sId

都是由编写代码的人创建的变量名。它们并不是天生的“意思”——代码的创建者可以选择他们想要的任何变量名。然而，在您的代码中，这两个变量的用法从它们的名称来看是不言而喻的

lightIndex

是一个整数（介于0和2之间），用作数组

lights

的索引，以便当前灯光（

light

）可以使用

light=lights[lightIndex]访问相关颜色。大概lights
的设置类似于var lights=['green'，'orange'，'red']
。因此，例如，light=lights[lightIndex]
变为light=lights[1]
，使light
变为等同于orange

sId
是一个延时函数（setTimeout（changeState，order[state][0]）；
）setTimeout（）
接受两个参数——要执行的函数和以毫秒为单位的时间延迟。在本例中，order[state][0]
相当于1000
（1秒），而changeState（）
是要执行的函数。本质上，每一秒钟，改变光的状态（变成不同的颜色）
我不知道为什么要尝试更改lightIndex
，但如果要反转灯光更改的方向，则需要反转for
循环：
for (lightIndex = 0; lightIndex < lightsLength; lightIndex += 1) {

如果要更改速度，需要更改顺序[状态][0]
。由于您没有显示顺序
变量的代码，您需要自己解决如何更改它
希望这有帮助
for (lightIndex = lightsLength; lightIndex > 0; lightIndex -= 1) {