我想的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>
尼斯计划!如果你遇到困难,请告诉我。 – bugwheels94
请不要将您的整个代码吐出堆栈溢出。创建一个[mcve];意思是,将代码缩小到您面临的问题。关于如何在JavaScript中随机化/洗牌数组以及如何从中获取随机项目,有很多很多问题。阅读这些内容,应用代码,然后如果您有任何问题,请回过头来问一下这些具体问题。 –