Javascript 将数组随机化为依赖数组，然后将它们发布到html_Javascript_Html_Arrays_Random

Javascript 将数组随机化为依赖数组，然后将它们发布到html

javascript html arrays random

Javascript 将数组随机化为依赖数组，然后将它们发布到html,javascript,html,arrays,random,Javascript,Html,Arrays,Random,我希望javascript为音频文件提供一个随机数组，然后将其放入html中的audiocontrols标记中。然后，根据拾取的音频文件，另一个随机数组将开始将图像放入div中，依此类推以下是相关网站：该网站目前尚未实施随机化 <!DOCTYPE html> <head> <title>Learn</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Co

我希望javascript为音频文件提供一个随机数组，然后将其放入html中的audiocontrols标记中。然后，根据拾取的音频文件，另一个随机数组将开始将图像放入div中，依此类推

以下是相关网站：该网站目前尚未实施随机化

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


学习
音乐网站




家
→ 你好
→ 还有别的吗
→ 另一个动作
→ 还有别的吗
关于
学习
接触
音乐网站
学习音乐
函数（）{
document.getElementById（“audio1”）.innerHTML=rand\u audio\u 1；
var audio_1=[“lowatrebbleclefpianovc.mp3”]，
[“lowtrebbleclefpianovc.mp3”]，[“lowtrebbleclefpianovc.mp3”]，
[“midbtrebbleclefpianovc.mp3”]，[“midctrebbleclefpianovc.mp3”]，
[“middtrebblefpianovc.mp3”]；
var rand_audio_1=audio_1[Math.floor（Math.random（）*audio_1.length）]；
}
函数（）{
如果（音频_1[0]）{
document.getElementById（“rand1”）.innerHTML=“”；
变量R1=[“myimage1”]、[“myimage2”]、[“myimage3”]、[“myimage4”]；
var rand1=R1[Math.floor（Math.random（）*R1.length）]；
}else if（音频_1[1]）{
document.getElementById（“rand1”）.innerHTML=“”；
变量R1=[“myimage1”]、[“myimage2”]、[“myimage3”]、[“myimage4”]；
var rand1=R1[Math.floor（Math.random（）*R1.length）]；
}否则如果（音频_1[2]）{
document.getElementById（“rand1”）.innerHTML=“”；
变量R1=[“myimage1”]、[“myimage2”]、[“myimage3”]、[“myimage4”]；
var rand1=R1[Math.floor（Math.random（）*R1.length）]；
}否则如果（音频_1[3]）{
document.getElementById（“rand1”）.innerHTML=“”；
变量R1=[“myimage1”]、[“myimage2”]、[“myimage3”]、[“myimage4”]；
var rand1=R1[Math.floor（Math.random（）*R1.length）]；
}否则如果（音频_1[4]）{
document.getElementById（“rand1”）.innerHTML=“”；
变量R1=[“myimage1”]、[“myimage2”]、[“myimage3”]、[“myimage4”]；
var rand1=R1[Math.floor（Math.random（）*R1.length）]；
}否则{
document.getElementById（“rand1”）.innerHTML=“”；
变量R1=[“myimage1”]、[“myimage2”]、[“myimage3”]、[“myimage4”]；
var rand1=R1[Math.floor（Math.random（）*R1.length）]；
}
}
函数（）{
if（R1[0]）{
document.getElementById（'div1'）.innerHTML=“”；
}else if（R1[1]）{
document.getElementById（'div2'）.innerHTML=“”；
}else if（R1[2]）{
document.getElementById（'div3'）.innerHTML=“”；
}else if（R1[3]）{
document.getElementById（'div4'）。innerHTML=“”；
}否则{
document.getElementById（'div5'）.innerHTML=“”；
}
}
}

您的代码确实有效。在某种程度上一些错误：

function(){  .... }

我什么也做不了。要执行的功能就在那里！（你从不这样做）

arr将是一个带有“a”和“b”的数组，对吗？不！您错配了括号，现在它们实际上是两个数组，使用逗号运算符计算：

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

所以你想做：

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

数组是为了让事情变得更简单，而不是为了做很多事情。因此，首先，我们要生成随机音频，然后从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'>";

};

window.onload=function（）{
var audio_holder=document.getElementById（“audio1”），
image_holder=document.getElementById（“rand1”）；
var audios=[“lowtrebbleclefpianovc.mp3”，“lowtrebbleclefpianovc.mp3”，“lowtrebbleclefpianovc.mp3”，“midbtrebbleclefpianovc.mp3”，“midtrebbleclefpianovc.mp3”，“midtrebbleclefpianovc.mp3”]；
var图像每音频=[
[“myimage1”、“myimage2”、“myimage3”、“myimage4”]，
[“myimage1”、“myimage2”、“myimage3”、“myimage4”]，
[“myimage1”、“myimage2”、“myimage3”、“myimage4”]，
[“myimage1”、“myimage2”、“myimage3”、“myimage4”]，
[“myimage1”、“myimage2”、“myimage3”、“myimage4”]，
[“myimage1”、“myimage2”、“myimage3”、“myimage4”]
];
如果（images_per_audio.length！==audios.length）抛出新错误（“图像和音频不匹配！”）；
var audio_index=Math.floor（Math.random（）*audios.length）；
var audio=audios[audio_index]；
var images=每音频的图像[音频索引]；
var image=images[Math.floor（Math.random（）*images.length）]；
audio_holder.innerHTML=“”；
图像_holder.innerHTML=“”；
};

好计划！如果您在某个地方卡住了，请告诉我。请不要将您的整个代码反刍到堆栈溢出上。创建一个；也就是说，将代码的范围缩小到您所面临的问题。关于如何在JavaScript中随机化/洗牌数组以及如何从数组中获取随机项，有很多很多问题。阅读这些，应用代码，然后如果你有问题，回来询问这些具体问题。我不确定代码是否有效，但你的解释非常有用！非常感谢您的时间和努力！：）还有，myimage1和ect。。。不是图像本身，而是我

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'>";

};