我想让javascript为音频文件提供一个随机数组，然后将其放入html中的audio controls标签中。然后，根据拾取的音频文件，另一个随机数组将开始将图像放入div中，依此类推。
此处有相关网站：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>
答案 0 :(得分：0)
您的代码确实有效。在某种方式。一些错误：
function(){ .... }
什么都不做。功能在那里执行！ （你永远不会这样做）
var arr=["a"],["b"];
arr将是一个带有＆＃34; a＆＃34;的数组。和＆＃34; b＆＃34;对？不！你错过了括号，现在它们实际上是两个数组，用逗号运算符进行评估：
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'>";
};