Question

<!DOCTYPE html>
<html>
    <head>
        <title>Traffic Light</title>
        <style type="text/css">
            .traffic-light {
              width: 100%;
            }

            .off {
              background-color: transparent!important;
            }

            .traffic-light {
              margin: 0 auto;
              width: 20%;
              min-width: 180px;
              border: 1px solid gray;
            }

            .traffic-light div {
              margin: 0 auto;
              width: 150px;
              height: 150px;
              border: 3px solid gray;
              border-radius: 50%;
              margin-top: 5px;
              margin-bottom: 5px;
            }

            .red {
              background-color: red;
            }

            .yellow {
              background-color: yellow;
            }

            .green {
              background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="traffic-light">
            <div class="light red off"></div>
            <div class="light yellow off"></div>
            <div class="light green off"></div>
        </div>

        <button type="button" onclick="cycle()">Next cycle</button>
        <button type="button" onclick="autoCycle()">Auto cycle</button>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
        <script type="text/javascript">
            var $tl = $('.traffic-light'), // Traffic light element
                $lights = $('.light', $tl), // All lights in one place
                states = [0, 4, 6, 1, 4]; // Binary states of traffic light

            function cycle() {
                var currentStateArr = $('.light', $tl).map(function (i, lightEl) {
                        return ~~!($(lightEl).hasClass('off'));
                    }).get(),
                    currentStateNum = parseInt(currentStateArr.join(''), 2); // Converting current TL state to decimal number for more comfort

                if (currentStateNum === 0) { // If ALL lights are OFF and we are here then next is obviously red
                    return $lights.addClass('off').siblings('.red').removeClass('off'); // and nothing to do here more
                }

                var nextStateIndex = states.indexOf(currentStateNum)+1,
                    nextStateNum = (nextStateIndex === states.length) ? 0 : parseInt(states[nextStateIndex]),
                    toTurnOn = null; // Lights to turn on

                $lights.addClass('off'); // Setting OFF all lights

                if (nextStateNum === 4) { // 4 = 100 > | Red:On | Yellow:Off | Green:Off |
                    toTurnOn = $lights.siblings('.red');
                } else if (nextStateNum === 6) { // 6 = 110 > | Red:On | Yellow:On | Green:Off |
                    toTurnOn = $lights.not('.green');
                } else if (nextStateNum === 1) { // 1 = 001 > | Red:On | Yellow:Off | Green:On |
                    toTurnOn = $lights.siblings('.green');
                }  else if (nextStateNum === 2) { // 2 = 010 > | Red:Off | Yellow:On | Green:Off |
                    toTurnOn = $lights.siblings('.yellow');
                }

                // Turning on what we decided earlier
                !(toTurnOn === null) ? toTurnOn.removeClass('off') : null ;
            }

            var interval = null;

            function autoCycle() {
                if (!(interval === null)) {
                    clearInterval(interval); // Stop cycling
                    interval = null; // Clear remebered interval
                    return;
                }

                // Setting c ycle intervgal to 1 second
                interval = setInterval(cycle, 1000); // Starting cycle and remember interval
            }
        </script>
    </body>
</html>

有人可以编辑此代码并对其进行编程，以便在用户点击文件后立即运行红绿灯吗？

Answer 1

使用.ready（）函数，该函数仅在页面完全加载并在内存中呈现后执行。

$( document ).ready(function() {
    // When document is fully loaded:
    autoCycle();
});

jQuery .ready() docs

Answer 2

在你的javascript结束时，你可以添加以下内容，它将使用jQuery来检测页面何时加载并调用autoCycle函数

$(function() {
    autoCycle()
});

Answer 3

您错误地创建了代码这段代码可以，我没有添加按钮，因为你可以自己做。

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
  font-family: sans-serif;
}

#controlPanel {
  float: left;
  padding-top: 30px;
}

.button {
  background-color: gray;
  color: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin: 90px 40px;
  cursor: pointer;
}

#traffic-light {
  width: 150px;
  float: left;
  background-color: #333;
  border-radius: 40px;
  margin: 30px 0;
  padding: 20px;
}

.lightbulb {
  height: 100px;
  width: 100px;
  background-color: #111;
  border-radius: 50%;
  margin: 25px auto;
  transition: background 500ms;
}

#controlPanel>h1 {
  margin-top: 30px;
  margin-bottom: 30px;
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>

<div id="controlPanel">

</div>

<div id="traffic-light">
  <div id="stopLight" class="lightbulb"></div>
  <div id="slowLight" class="lightbulb"></div>
  <div id="goLight" class="lightbulb"></div>
</div>
    <script type="text/javascript">

autoLights();

var call = ['stopRed','slowYellow','goGreen'];
function stopRed() {
  Lights();
  document.getElementById('stopLight').style.backgroundColor = "red";
}

function slowYellow() {
  Lights();
  document.getElementById('slowLight').style.backgroundColor = "orange";
}

function goGreen() {
  Lights();
  document.getElementById('goLight').style.backgroundColor = "green";
}


function Lights() {
  document.getElementById('stopLight').style.backgroundColor = "black";
  document.getElementById('slowLight').style.backgroundColor = "black";
  document.getElementById('goLight').style.backgroundColor = "black";
}


var count = 0;

function timer() {
  setInterval(function() {
  count = count % 3;
  window[call[count]]();
   count++;
  }, 1000);
}

function autoLights() {
  timer();
}
    </script>
</body>
</html>

有人可以告诉我如何让这个红绿灯自动工作吗？

3 个答案: