2017-02-22 6 views
-4

予期しないトークンだから私はいくつかの授業のためのコードを作ってきた、コードは、画面上のトラフィックの光画像を変更する機能を実行するページのロードの機能を開始することとしています。プログラムをクラッシュさせたり、実行しようとすると読み込みに失敗したりするのは永遠に変わることはありません。問題には、条件で使用される変数が変更されていないことを示す前に、私は次のコードで変更しようとしました。私がクロームデバッガで実行したときにこれが出てきました。 'Uncaught SyntaxError:予期しないトークン<'。JavaScriptのループ誤差ながら:

<DOCTYPE html> 
<html> 
    <body onload="infinity()"> 
     <p></p> 
     <h1>Traffic Light Sequence</h1> 
     <img id ="trafficlight" src="r.jpg"> 
     <script> 
      var images = [ 
       "r.jpg", 
       "randy.jpg", 
       "g.jpg", 
       "y.jpg" 
      ]; 
      var counter = 0; 
      function start() { 
       counter = counter + 1; 
       if(counter == images.length) counter=0; 
       var image = document.getElementById("trafficlight"); 
       image.src=images[counter]; 
      } 
      var a = 100; 
      function infinity() { 
       while (200>a) { 
        setTimeout(start(), 3000); 
       } 
       a = a - 25; 
      } 
     </script> 
    </body> 
</html> 
+0

'= Aあなたの無限ループのコードを実行しているから熱い - 25;'ループ内でなければなりません。また、スタート 'にかっこを削除()' 'setTimeout' – 4castle

+3

のためにあなたは、エラーが何であるかを言いませんでした。それはむしろ重要です。 、あなたのコンソールを開き、デバッガを使用して、間違っている正確に何を教え、それはあなたを混乱させる理由 – Carcigenicate

+0

。私は「:予期しないトークン<キャッチされないでSyntaxError」それを実行したとき – csmckelvey

答えて

0

whileループとsetTimeoutを設定する代わりに、setIntervalを使用します。以下のコードは私が思うように動作します。それは私がこの質問にはすでに答えを持っていることを知って

var url="http://www.hdwallpapers.in/thumbs/2017/"; 
 
var a=0,Handler; 
 
var images = ["yosemite_national_park_winter_4k-t1.jpg","namib_coastal_desert_4k-t1.jpg","beach_dock-t1.jpg"]; 
 
var counter = 0; 
 
function start() { 
 
    counter = counter + 1; 
 
    a++; 
 
    if(a>=100 && Handler) 
 
    clearInterval(Handler); 
 
    if(counter == images.length) counter=0; 
 
    var image = document.getElementById("trafficlight"); 
 
    image.src=url+images[counter]; 
 
    return; 
 
} 
 
function infinity() { 
 
    Handler=setInterval(start, 3000); 
 
}
<DOCTYPE html> 
 
<html> 
 
    <body onload="infinity()"> 
 
     <p></p> 
 
     <h1>Traffic Light Sequence</h1> 
 
     <img id ="trafficlight" src="http://www.hdwallpapers.in/thumbs/2017/yosemite_national_park_winter_4k-t1.jpg"> 
 
     <script> 
 
      
 
     </script> 
 
    </body> 
 
</html>

0

画像を100回変更されますが、私はちょうど次のコードは、より良い、それを行うための比較的簡単な方法であるかもしれないことを考え出し。

<DOCTYPE html> 
<html> 
    <body onload="infinity()"> 
     <p></p> 
     <h1>Traffic Light Sequence</h1> 
     <img id ="trafficlight" src="r.jpg"> 
     <script> 
      var images = [ 
       "red.JPG", 
       "green.jpg", 
       "randy.jpg", 
       "yellow.JPG" 
      ]; 
      function infinity() { 
       var counter = 0, 
        image = document.getElementById("trafficlight"), 
        a = 5, 
        timeoutInterval = 3000; 
       setInterval(function() { 
       counter++; 
       if(counter == images.length) counter=0; 
       if (a>=0) { 
        image.src=images[counter]; 
        a--; 
       }else{ 
        // this else case is in the event that the timeout 
        // variable is 1, which is essentially 1ms, which 
        // is bad as it would make your cpu usage go to a 
        // 100% 
        if (timeoutInterval <= Number.MAX_SAFE_INTEGER - 2) { 
         // the above if condition is to stop timeoutInterval 
         // from ever reaching 2^53 which would cause an 
         // overflow 
         timeoutInterval *= 2; 
         Math.pow(timeoutInterval, 20); 
        } 
       } 
       }, timeoutInterval); 
      } 
     </script> 
    </body> 
</html> 

ありがとう!

P.S.私のラップトップはまだ例の