Question

我的代码运行正常，但我只需要一个按钮，这样只有当用户点击按钮时，代码才会运行。我之前尝试过使用一个按钮，它按照我按下它时灯光的变化而工作，但代码仍然可以运行。请你能帮我一个按钮，这样当我按下它时，灯会改变一次。我没有显示我的CSS代码，因为它没有必要，但有了它，我的代码工作正常。谢谢！

HTML：

 <div id="box"></div>
    <div id="redCircle"></div>
    <div id="yellowCircle"></div>
    <div id="greenCircle"></div>

JavaScript的：

<script>
       var time = 6; 

function lights() {
  var red = document.getElementById('redCircle');
  var yellow = document.getElementById('yellowCircle');
  var green = document.getElementById('greenCircle');
  var Colours = ["#FF0000", "#FFB300", "#05FF0D", "#7A0000", "#7A5C00", "#008000"];
  if (time == 6 || time == 5) {
    red.style.background = Colours[0]; 
    yellow.style.background = Colours[4]; 
    green.style.background = Colours[5]; 
    time = 1;
  } else if (time == 2) 
  {
    red.style.background = Colours[0];
    yellow.style.background = Colours[1]; 
    green.style.background = Colours[5];
  } else if (time == 3) {
    red.style.background = Colours[3];
    yellow.style.background = Colours[4];
    green.style.background = Colours[2];
  } else if (time == 4) {
      red.style.background = Colours[3];
      yellow.style.background = Colours[1];
      green.style.background = Colours[5]; 
   }
    time += 1; 
};
setInterval(function() {
  lights();
}, 1500);
</script>

Answer 1

根据您的评论，我编辑了这个答案。

仍然将此添加到您的html：

<button onClick=runCode()>Run</button>

这是整个脚本代码。请注意，有一种更优雅的方法可以做到这一点，但这可以完成工作。

<script>
    var time = 6;
    var count = 0;
    var run1 = false;
    var run2 = false;
    var run3 = false;
    var run4 = false;
    var lightsRunning = false;

    function lights() {
        var red = document.getElementById('redCircle');
        var yellow = document.getElementById('yellowCircle');
        var green = document.getElementById('greenCircle');
        var Colours = ["#FF0000", "#FFB300", "#05FF0D", "#7A0000", "#7A5C00", "#008000"];
        if (time == 6 || time == 5 && run1) {
            console.log('running 1');
            red.style.background = Colours[0];
            yellow.style.background = Colours[4];
            green.style.background = Colours[5];
            time = 1;
        } else if (time == 2 && run2)
        {
            red.style.background = Colours[0];
            yellow.style.background = Colours[1];
            green.style.background = Colours[5];
        }
        else if (time == 3 && run3) {
            red.style.background = Colours[3];
            yellow.style.background = Colours[4];
            green.style.background = Colours[2];
        } else if (time == 4 && run4) {
                red.style.background = Colours[3];
                yellow.style.background = Colours[1];
                green.style.background = Colours[5];
         }
            time += 1;
    };

    runCode = function(){
        count += 1;
        if (count === 1) {
            run1 = true;
        } else if (count === 2) {
            run2 = true;
        } else if (count === 3) {
            run3 = true;
        } else if (count === 4) {
            run4 = true;
        }

        if (!lightsRunning) {
            setInterval(function() {
                lights();
            }, 1500);
            lightsRunning = true;
        }
    }

</script>

这将阻止您的setInterval代码在页面加载时运行，因为脚本标记内的所有内容都在页面加载时运行，并且仅在用户单击按钮时将其设置为关闭。此外，它将仅执行lightsRunning功能的部分作为＆＃34;运行代码＆＃34;多次按下按钮。

我认为这就是你想要的。或者，您可以有四个按钮，每个按钮设置一个不同的标志 - run1，run2，run3，run4。这并不难实现。

Answer 2

要在单击按钮时执行某项功能，您应该使用event handler，在这种情况下，它将是.onclick处理程序。

<html>
    <body>
        <button id="myButton" name="myButton">Button!</button>
        <script>
            function hello () {
                alert("Hello click world!");
            }
            document.getElementById("myButton").onclick = hello;
        </script>
    </body>
</html>

此示例此处将在屏幕上创建一个名为myButton的按钮，当您点击该按钮时，屏幕上会显示消息Hello click world!。

在您的情况下，您应该将setInterval代码放在lights()函数内以及setInterval调用的功能块内部的旧内容中。
完成后，只需将按钮的onclick事件绑定到lights()函数。

如何为此JavaScript / HTML代码添加一个按钮，以便我的代码仅在按下按钮后才会运行？

2 个答案: