随机化与依赖阵列的阵列，然后让它们发布的HTML

-1

我想的JavaScript来对音频文件，然后将其放置到HTML中的音频控制标签随机阵列。然后，根据选择哪个音频文件，另一个随机数组将开始将图像放入div中，依此类推。随机化与依赖阵列的阵列，然后让它们发布的HTML

另外这里是有问题的网站：http://driglight.com/Learn5.html 这个网站目前没有实施随机化。

<!DOCTYPE html> 

<head> 
<title>Learn</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 

    <link rel="stylesheet" href="css/bootstrap.css"> 
    <link rel="stylesheet" href="css/bootstrap-responsive.css"> 
    <link rel="stylesheet" href="css/custom-styles.css"> 
    <link rel="stylesheet" href="css/font-awesome.css"> 
    <link rel="stylesheet" href="css/component.css"> 
    <link rel="stylesheet" href="css/font-awesome-ie7.css"> 

    <script src="js/Timhasnoinput.js"></script> 
    <!-- <script src="js/stuff.js"></script> --> 
</head> 
<body> 
    <!--[if lt IE 7]> 
     <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> 
    <![endif]--> 

    <!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html --> 
     <div class="header-wrapper"> 
      <div class="container"> 
       <div class="row-fluid"> 

        <div class="site-name"> 
         <h1>Music Website</h1> 
        </div> 




       </div> 
      </div> 
     </div> 
     <div class="container"> 
     <div class="menu"> 

        <div class="navbar"> 
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
          <i class="fw-icon-th-list"></i> 
         </a> 
         <div class="nav-collapse collapse"> 
          <ul class="nav"> 
           <li class="active"><a href="index.html">Home</a></li> 


           <li><a href="Learn.html">Learn</a></li> 
           <li><a href="contact.html">Contact</a></li> 
          </ul> 
         </div><!--/.nav-collapse --> 
        </div> 
        <div class="mini-menu"> 
     <label> 
     <select class="selectnav"> 
     <option value="#" selected="">Home</option> 

     <option value="#">→ Hello</option> 
     <option value="#">→ Something else here</option> 
     <option value="#">→ Another action</option> 
     <option value="#">→ Something else here</option> 
     <option value="#">About</option> 
     <option value="#">Learn</option> 
     <option value="#">Contact</option> 
     </select> 
     </label> 
     </div> 

     </div> 
     </div> 
     <div class="container bg-white"> 
      <div class="row-fluid"> 
       <div class="span12 "> 
        <div class="main-caption"> 
         <h1>Music Website</h1> 
         <h6>Learning Music</h6> 

        </div> 
        <div class="Timmy2"> 
            <h4><a href="Learn4.html">< Lesson 2</a></h4> 
            <h6></h6> 
            </div> 
       </div> 
      </div> 

       </div> 
      </div> 
     </div> 

     <div class="container bg-white"> 

      <div class="row-fluid"> 
       <div class="span12"> 
        <div class="banner"> 
        <div class="audiobuttonholder"> 
        <div class="audioholder" style="padding-bottom:24px;"> 
         <audio controls> 
         <source src= audio_1 type="audio/mpeg"> 

         hello 
         </audio> 
         </div> 
         <div class="buttonholder"; style="position: absolute; left: 10px; top: 40px;"> 

         </div> 
        <div class = "numberPage"> 
        Pg. 3 Trebble Cleff 
        </div> 
         <div class = "control"> 





         <ul> 
<div id="div1" style="display:none; float: right; margin-right: 120px; 
margin-top: 40px;" > 

</div> 
<input type="image" id="myimage1" style="height:200px;width:200px;" 
onclick="showDivOne()"/> 

</ul> 

         <ul> 
<div id="div2" style="display:none; float: right; margin-right: 120px;" > 

</div> 
<input type="image" id="myimage2" style="height:200px;width:200px; padding- 
top:24px;" onclick="showDivTwo()"/> 
</ul> 

<ul> 
<div id="div3" style="display:none; float: right; margin-right: 120px; 
padding-top: 40px;" > 

</div> 
<input type="image" id="myimage3" style="height:200px;width:200px; 
paddingtop:24px;" onclick="showDivThree()"/> 
</ul> 




<ul> 
<div id="div4" style="display:none; float: right; margin-right: 120px; 
margin- 
top: 40px;" > 

</div> 
<input type="image" id="myimage4" style="height:200px;width:200px;" 
onclick="showDivFour()" /> 
</ul> 



<!-- 
<div id="welcomeDiv" style="display:none;" > <input type="image" 
id="myimage" style="height:150px;width:400px;" src="Continue.png" /></div> 
<input type="image" name="answer" src="Continue.png" onclick="showDiv()" /> 
--> 


<!-- 
<div id="welcomeDiv" style="display:none;" > 
<img src = "GoodJob.png"></img> 
</div> 
<input type="image" id = "HaveFun" style="height:200px;width:200px;" src = 
"HighE.gif" onclick="showDiv()" /> 
--> 




         </div> 
      </div> 
       </div> 
      </div> 
     </div> 

         <div class="featured-images"> 
         <ul class="grid effect-8" id="grid"> 
          <li> 
          <div class="block"> 
          <div class="Timmy2"> 
            <h4><a href="Learn3.html">< Lesson 2</a> 
</h4> 
            <h6></h6> 
            </div> 
          </div> 
          </li> 
         </ul> 
          <div class="block-content"> 

            <div class="user-info"> 

            <h4><a href="index.html">Home</a></h4> 
            <h6> </h6> 

            </div> 

           <div class="user-info"> 

            <h4><a href="Learn.html">Learn</a></h4> 
            <h6> </h6> 
           </div> 
           <div class="user-info"> 

            <h4><a href="contact.html">Contact</a> 
</h4> 
            <h6> </h6> 
           </div> 

          </div> 
         </div> 

      </div> 
     </div> 







    <script> 

    function() { 
    document.getElementById("audio1").innerHTML = rand_audio_1; 
    var audio_1 = ["LowATrebbleCleffPianoVC.mp3"], 
["LowETrebbleCleffPianoVC.mp3"],["LowGTrebbleCleffPianoVC.mp3"], 
["MidBTrebbleCleffPianoVC.mp3"],["MidCTrebbleCleffPianoVC.mp3"], 
["MidDTrebbleCleffPianoVC.mp3"]; 
    var rand_audio_1 = audio_1[Math.floor(Math.random()*audio_1.length)]; 
    } 
    function() { 

    if (audio_1[0]){ 
    document.getElementById("rand1").innerHTML = "<img src='LowA.gif'>"; 
    var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"]; 
    var rand1 = R1[Math.floor(Math.random()* R1.length)]; 
    } else if(audio_1[1]){ 
    document.getElementById("rand1").innerHTML = "<img src='LowE.gif'>"; 
    var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"]; 
    var rand1 = R1[Math.floor(Math.random()* R1.length)]; 
    } else if(audio_1[2]){ 
    document.getElementById("rand1").innerHTML = "<img src='LowG.gif'>"; 
    var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"]; 
    var rand1 = R1[Math.floor(Math.random()* R1.length)]; 
    } else if(audio_1[3]){ 
    document.getElementById("rand1").innerHTML = "<img src='MidB.gif'>"; 
    var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"]; 
    var rand1 = R1[Math.floor(Math.random()* R1.length)];  
    } else if(audio_1[4]){ 
    document.getElementById("rand1").innerHTML = "<img src='MidC.gif'>"; 
    var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"]; 
    var rand1 = R1[Math.floor(Math.random()* R1.length)]; 
    } else { 
    document.getElementById("rand1").innerHTML = "<img src='MidD.gif'>"; 
    var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"]; 
    var rand1 = R1[Math.floor(Math.random()* R1.length)]; 
    } 
    } 

    function() { 
    if (R1[0]) { 
    document.getElementById('div1').innerHTML = "<img src='GoodJob.png'>"; 
    } else if(R1[1]) { 
    document.getElementById('div2').innerHTML = "<img src='GoodJob.png'>"; 
    } else if(R1[2]){ 
    document.getElementById('div3').innerHTML = "<img src='GoodJob.png'>"; 
    } else if(R1[3]) { 
    document.getElementById('div4').innerHTML = "<img src='GoodJob.png'>"; 
    } else { 
    document.getElementById('div5').innerHTML = "<img src='GoodJob.png'>"; 
    } 
    } 
    } 
</body>

来源

2017-06-02 Drig Dramel

尼斯计划！如果你遇到困难，请告诉我。 – bugwheels94

请不要将您的整个代码吐出堆栈溢出。创建一个[mcve];意思是，将代码缩小到您面临的问题。关于如何在JavaScript中随机化/洗牌数组以及如何从中获取随机项目，有很多很多问题。阅读这些内容，应用代码，然后如果您有任何问题，请回过头来问一下这些具体问题。 –

你的代码做的工作。在某种方式。一些错误：

function(){ .... }

什么都不会做。函数在那里被执行！（你永远不要这样做）

var arr=["a"],["b"];

改编将与“A”和“B”右一个数组？不！你们已经missmatched括号，现在更有耐力实际上是两个阵列，用逗号操作评估：

console.log(arr);//["b"]

所以你想做的事：

var arr=["a","b"];

数组都是为了方便起见，不要那么做很多如果elses。因此，在第一，我们要生成随机音频，然后采取一些可能的图像了images_per_audio阵列，并把他们的随机一个：

window.onload=function(){ 
    var audio_holder=document.getElementById("audio1"), 
     image_holder=document.getElementById("rand1"); 

var audios= ["LowATrebbleCleffPianoVC.mp3","LowETrebbleCleffPianoVC.mp3","LowGTrebbleCleffPianoVC.mp3","MidBTrebbleCleffPianoVC.mp3","MidCTrebbleCleffPianoVC.mp3","MidDTrebbleCleffPianoVC.mp3"]; 

var images_per_audio = [ 
    ["myimage1","myimage2","myimage3","myimage4"], 
    ["myimage1","myimage2","myimage3","myimage4"], 
    ["myimage1","myimage2","myimage3","myimage4"], 
    ["myimage1","myimage2","myimage3","myimage4"], 
    ["myimage1","myimage2","myimage3","myimage4"], 
    ["myimage1","myimage2","myimage3","myimage4"] 
]; 

if(images_per_audio.length!==audios.length) throw new Error("Images and Audios do not match!"); 

var audio_index = Math.floor(Math.random()*audios.length); 

var audio=audios[audio_index]; 
var images=images_per_audio[audio_index]; 
var image=images[Math.floor(Math.random()*images.length)]; 

audio_holder.innerHTML="<audio src='"+audio+"'>"; 
image_holder.innerHTML="<img src='"+image+".jpg'>"; 

};

来源

2017-06-02 18:51:24

我不知道，如果代码工作还没有，但你的解释是非常有帮助！非常感谢您的时间和精力！ :) –

此外，myimage1和等...不是图像本身，他们的ID，其将持有的图像的div。我已经做了一个数组，其中的id是随机的，所以图像将被放置在一个随机的div。因为我们假设LowTrebbleCleffPianoVC.mp3是通过随机选取获得的，那么我想要一个具有.document.innerHTML的数组，其图像源为“LowA.gif”，以匹配选择的音频和随机化为div id的名为myimage1 ，myimage2等......这样，图像LowA.gif被随机放置在其中之一。 –

@DrigDramel我想你可以改变自己。香港专业教育学院已经提供了一个良好的起点...... –

随机化与依赖阵列的阵列，然后让它们发布的HTML

回答

相关问题