无法从多个阵列创建随机排序的图像

时间:2017-05-15 21:08:42

标签: javascript html arrays

我已经创建了一个工作的javascript数组随机序列生成器,详细说明如下。我正在尝试应用相同的原理,但从文件夹中读取数组中的图像。

我试图实现

的版本

document.getElementById("~ /images/demo.png"),没有运气

我不确定这是否是最佳方法。我对文本数组功能感到满意如何使用图像(jpegs,gifs等)复制它? CSS现在可以退居二线。

在一行中,如何修改当前代码以从给定文件夹中的数组中随机排序图像?只输入文件名不起作用,即var firstSection = ["Bright.jpg ","Clear.jpg","Open.jpg"];只返回文本字符串。

感谢任何帮助。

function makeAseq() {
  /* First section in sequence  */  
  var firstSection = ["Bright ","Clear","Open"];
  /* second section in sequence  */  
  var secondSection = ["Foreground", "Growth", "Hard "];
  /* third section in sequence  */  
  var thirdSection = [ "form", "coloful", "slow",];

  firstSection = firstSection[Math.round(Math.random()* (firstSection.length-1))];
  secondSection =  secondSection[Math.floor(Math.random()*(secondSection.length))];
  thirdSection = thirdSection[Math.floor(Math.random()*(thirdSection.length))];                                 
  
  document.getElementById("holdSequence").innerHTML = "<div                style='background-color:#fff; opacity: .75;'> "+ firstSection + ","+ secondSection + ","+ thirdSection + "</div>"
}
<!doctype html>

<html lang="en">
  <head>
    <title> Section Sequence Generator </title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1> Sequence Generator</h1>
    <p><button onClick="makeAseq()">Generate</button></p>
    <div id="holdSequence"></div>
  </body>
</html>

    

1 个答案:

答案 0 :(得分:0)

function makeAseq() {

/*     First section in sequence  */  

var firstSection = ["demo3","demo1","demo2"];
var secondSection = ["demo3","demo1","demo2"];




 firstSection =    firstSection[Math.round(Math.random()*   (firstSection.length-1))]; 

secondSection =    secondSection[Math.round(Math.random()*(secondSection.length-1))];  



document.getElementById("holdSequence").innerHTML =
"<div style='background-color:#fff; opacity: .75;'>  <img src=\"/Users     /images/JPEG/"  + firstSection  +  ".jpg\"><img src=\"/Users/images/JPEG/"   + secondSection  +  ".jpg\"></div>"









}