我怎样才能使这个循环不断？答案

【问题标题】：How can I make this loop continuously?我怎样才能使这个循环不断？
【发布时间】：2015-12-09 10:30:43
【问题描述】：

我需要使它不需要用户输入，因此不需要按钮。一旦程序加载，它应该开始重复/运行。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      var lights=["redlight.jpg","redamberlight.jpg","amberlight.jpg","greenlight.png"]
      var lightscentre= 0
      var timer
      function LightCycle
      {
        if(++lightscentre==30)
          lightscentre=0

          document.images.banner.src = lights[lightscentre]

          timer = setTimeout("LightCycle()",1000)
      }
      function stopCycle()
      {
        clearTimeout(timer)
      }
    </script>
  </head>
  <body>
    <img src="banner1.jpg" name="banner" width=130 height=175>

    <form>
      <input type="button" value="Cycle" name="Cycle" onclick="LightCycle()">
      <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
    </form>
  </body>

</html>

【问题讨论】：

标签： javascript html arrays loops button

【解决方案1】：

setInterval 应该可以完成这项工作，它会以毫秒的间隔运行您的函数

setInterval(LightCycle, 3000);

来源： https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

【讨论】：

感谢您的反馈 Praveen 这是我的第一个回复，所以可能有点粗略。更好的来源（可能）developer.mozilla.org/en-US/docs/Web/API/WindowTimers/…。 sn-p 只是我应该明确指出的正确方向上的一个未经测试的点。
既然你明白了。我编辑了看起来正确的答案......作为第一个用户，我给你投票！ :)享受。

【解决方案2】：

你没有调用它。要调用它，请使用：

window.onload = LightCycle;

只有这样它才会启动计时器。你忘了添加那个！ :(

【讨论】：

【解决方案3】：

你只需要设置一个onload函数。

window.onload = LightCycle;

这将在加载窗口时启动 LightCycle() 函数。

您还可以使用 html 属性 onload，它将在其中运行 javascript。

<body onload="LightCycle()"> </body>

完成您的完整示例：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  var lights=["redlight.jpg","redamberlight.jpg","amberlight.jpg","greenlight.png"]
  var lightscentre= 0
  var timer
  function LightCycle
  {
    if(++lightscentre==30)
      lightscentre=0

    document.images.banner.src = lights[lightscentre]

    timer = setTimeout("LightCycle()",1000)
  }

  window.onload = LightCycle;
  </script>
</head>
<body>
  <img src="banner1.jpg" name="banner" width=130 height=175>
</body>

【讨论】：

【解决方案4】：

在 jQuery 中你可以这样做：

$(document).ready(function(){LightCycle()});

然后，当站点加载后，它将调用 LightCycle 函数。或者你用html制作：

<body onLoad="LightCycle()"></body>

【讨论】：

@Praveen Kumar 在正文标签中使用 onLoad 试试
别说你是程序员。 :P 有一种东西叫做修订。去看看，告诉我你做错了什么。
@Praveen Kumar 更好？
让我们continue this discussion in chat。

【解决方案5】：

您的脚本中有很多语法错误。但是，我已经对其进行了编辑以运行：

var lights = [
  "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Bogensch%C3%BCtzen_in_Ili-Mano_2.jpg/800px-Bogensch%C3%BCtzen_in_Ili-Mano_2.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/3/3e/Archery_competition.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/3D_game_hunting_0001.jpg/320px-3D_game_hunting_0001.jpg"]

var lightscentre = 0
var timer

function LightCycle() {
  
  if (++lightscentre == 3) {
    
    lightscentre = 0
  
  }

  document.images.banner.src = lights[lightscentre]

  timer = setTimeout("LightCycle()", 1000)
    
}

function stopCycle() {
  
  clearTimeout(timer)
  
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Archery_target.jpg/320px-Archery_target.jpg" name="banner" width=130 height=175>

<form>
 <input type="button" value="Cycle" name="Cycle" onclick="LightCycle()">
 <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>

现在，要在不使用按钮的情况下使其工作，您只需在脚本中调用该函数。看看这个 sn-p：

var lights = [
  "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Bogensch%C3%BCtzen_in_Ili-Mano_2.jpg/800px-Bogensch%C3%BCtzen_in_Ili-Mano_2.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/3/3e/Archery_competition.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/3D_game_hunting_0001.jpg/320px-3D_game_hunting_0001.jpg"]

var lightscentre = 0
var timer

function LightCycle() {
  
  if (++lightscentre == 3) {
    
    lightscentre = 0
  
  }

  document.images.banner.src = lights[lightscentre]

  timer = setTimeout("LightCycle()", 1000)
    
}

function stopCycle() {
  
  clearTimeout(timer)
  
}

//ADDED LINES!!!
LightCycle();

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Archery_target.jpg/320px-Archery_target.jpg" name="banner" width=130 height=175>

<form>
 <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>

提到这两行：

//ADDED LINES!!!
LightCycle();

但是，在您给定的 html 中，它看起来像这样：

<script type="text/javascript">
var lights=["redlight.jpg","redamberlight.jpg","amberlight.jpg","greenlight.png"]
var lightscentre= 0
var timer
function LightCycle
{
if(++lightscentre==30)
  lightscentre=0

document.images.banner.src = lights[lightscentre]

timer = setTimeout("LightCycle()",1000)
}
function stopCycle()
{
 clearTimeout(timer)
}

//ADDED LINES!!!
LightCycle();
</script>

【讨论】：

【解决方案6】：

有一些问题...

缺少“LightCycle”函数 ()。
该列表在第一个元素之前增加。
我认为使用 getElementById 比 document.images 更好...
图片元素缺少 ID 字段。
该函数可以简单地从body onload中调用，无需添加jquery。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    var lights=["1.jpg","2.jpg","3.jpg","4.jpg"]
    var lightscentre=0;
    var timer;

    function LightCycle() {
        if(lightscentre==4) lightscentre=0

      document.getElementById('banner').src = lights[lightscentre];
        lightscentre++

      timer = setTimeout("LightCycle()",1000)
    }

    function stopCycle()
    {
     clearTimeout(timer)
    }

    LightCycle();
</script>
</head>
<body onLoad="LightCycle()">
<img src="1.jpg" name="banner" id="banner" width=130 height=175>

<form>
 <input type="button" value="Cycle" name="Cycle" onclick="LightCycle()">
 <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>
</body>

【讨论】：

【解决方案7】：

试试这个

var lights=["redlight.jpg","redamberlight.jpg","amberlight.jpg","greenlight.png"];
var lightscentre= 0;
var timer;

function LightCycle(){
  
  if(++lightscentre==4){
    lightscentre=0;
  }
  document.getElementById('banner').src = lights[lightscentre];
  timer = setTimeout(LightCycle,1000);
}

window.onload = LightCycle();

在 html 中添加 ID 属性。

&lt;img src="banner1.jpg" name="banner" id="banner" width=130 height=175&gt;

【讨论】：

【解决方案8】：

在这种情况下，权利将使用“setInterval”。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        var lights = ["redlight.jpg", "redamberlight.jpg", "amberlight.jpg", "greenlight.png"],
            index = 0,
            timerID;

        function loadLight() {
            if (index == lights.length) {
                index = 0;
            }

            var banner = document.getElementById("bannerEl");
            if (banner) {
                banner.src = lights[index];
                banner.alt = lights[index];
            }

            index++;
        }

        function startCycle() {
            timerID = setInterval(loadLight, 1000);
        }

        function stopCycle() {
            clearInterval(timerID);
        }
    </script>
</head>
<body onload="startCycle();">
    <form id="form1">
        <img src="banner1.jpg" id="bannerEl" width="130" height="175" alt="" />
        <input type="button" value="Cycle" name="Start" onclick="startCycle()" />
        <input type="button" value="Stop" name="Stop" onclick="stopCycle()" />
    </form>
</body>
</html>

【讨论】：

【解决方案9】：

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
<img id="img" src="Chrysanthemum.jpg" name="banner" width=130 height=175>

<script type="text/javascript">
    var lights=["Chrysanthemum.jpg","Desert.jpg","Hydrangeas.jpg"];
    var lightscentre= 0;
    function LightCycle()
    {
        if(++lightscentre==3)
        lightscentre=0;
        document.getElementById('img').src=lights[lightscentre];

    }
    setInterval(function(){
    LightCycle();
    },2000);
</script>
</body>

</html>

它会工作..！如果要停止，请使用相同的方法 [添加计时器变量]

【讨论】：

【解决方案10】：

您必须在加载窗口时激活该功能 - 因此不需要用户操作。

你可以使用 jquery 的原因：

$(function(){ //this will be executed when the window is fully loaded
   LightCycle();
})

【讨论】：

未用 jQuery 标记。请不要为寻求 JavaScript 解决方案的问题发布 jQuery 解决方案。
您实际上可以使用window.onload = function () {}。 jQuery 只是一个 JavaScript 库。不像魔法。