脚本的结构我认为我错了。有耐心,我正在尝试将代码的结构安排到我更了解的地方

时间:2018-06-25 18:10:55

标签: javascript html5 css3

这是Simon一直在使用javascript进行的一个项目,因此我可以在逻辑上建立更好的理解,以便在编写代码时可以肯定地解释和理解。 / p>

以下是Chrome在网络控制台中输出的代码: screen shot of web console

在控制台日志中,我的输出为5,但是当您向右看时代码5输出“ index.html 61:3”时,在index.html之前的椭圆形数字95。

从5开始,然后继续增加5,现在达到95。

我一直在尝试完善所有输入的编码将对您有所帮助。 这是我的代码:

    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    </head>
    <body>
    <h2 id="clickNumber">0</h2>
      <button id="red1" class="colors" onclick="red()"></button>
      <button id="blue1" class="colors" onclick="blue()"></button>
      <button  id="green1" class="colors" onclick="green()"></button>
      <button id="yellow1" class="colors" onclick="yellow()"></button>
    <script>
    //
    simonArr=[];
      simonArr[0] = red;
      simonArr[1] = blue;
      simonArr[2] = green;
      simonArr[3] = yellow;
      simonAr = [
       document.getElementById('red1'), document.getElementById('blue1'),                            
       document.getElementById('green1'), document.getElementById('yellow1')
      ];


    function red(){
     document.getElementById('red1').style.opacity = ".25";
       setInterval( function(){
           document.getElementById('red1').style.opacity = "1";
          }, 3000);
    }

    function blue(){
    document.getElementById('blue1').style.opacity = ".25";
    setInterval( function(){
           document.getElementById('blue1').style.opacity = "1";
          }, 3000);
    }
    function green(){
    document.getElementById('green1').style.opacity = ".25";
    setInterval( function(){
           document.getElementById('green1').style.opacity = "1";
          }, 3000);
    }
    function yellow(){
    document.getElementById('yellow1').style.opacity = ".25";
    setInterval( function(){
           document.getElementById('yellow1').style.opacity = "1";
          }, 3000);

    }


    var mySimon = setInterval(simonMix, 2000);
    var simonX = simonAr.push(Math.floor(Math.random()*simonAr.length)+1);

    function simonMix(){
    for(var i=0;i<simonAr.length;i++){
       if(simonX[i].style.opacity = ".25"===-1){
    simonX[i].style.opacity ="1";   
  };
      console.log(simonX)

      }
    }



    </script>
    </body>
    </html>

0 个答案:

没有答案