有人可以告訴我如何讓這個紅綠燈自動工作嗎？

-5

<!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>

是否有人可以編輯此代碼並對其進行編程，以便在用戶點擊文件後立即使交通燈運行？有人可以告訴我如何讓這個紅綠燈自動工作嗎？

來源

2017-01-09 user6881162

請特別提出一個具體的問題，解釋哪些部位特別有問題。這不是要求別人做你的工作的正確的地方。 –

在您的JavaScript結束時，您可以添加將使用jQuery來檢測時，頁面加載並調用autoCycle功能

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

來源

2017-01-09 13:57:08 Stuart

嗨，我最後添加這個嗎？ – user6881162

您應該可以將其添加到頁面的任何位置，但在autoCycle功能之後可能會使視覺效果最佳 – Stuart

使用。就緒（）函數以下僅執行後頁面完全加載並在內存中呈現。

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

jQuery .ready() docs

來源

2017-01-09 14:10:12

你必須創建代碼錯誤此代碼將做什麼，我沒有添加一個按鈕，你可以做你自己。

<!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>

來源

2017-05-10 10:08:51

有人可以告訴我如何讓這個紅綠燈自動工作嗎？

回答

相關問題