如何將圖像添加到此隨機數組？

Question

我想知道是否可以將圖像添加到隨機生成器，以便在單擊按鈕時顯示電影標題和電影中的圖片。

 function GetValue() { var myarray= new Array("The Santa Claus","Just Friends","Home Alone", "Home Alone 2","Serendipity","Love Actually","Elf","Christmas Vacation","A Christmas Story","The Grinch","Jingle All the Way","Rudolph the Red-Nosed Reindeer","Ernest Saves Christmas","Frosty the Snowman","The Muppet Christmas Carol","The Nightmare Before Christmas","Jesus of Nazareth 1977","Bad Santa"); var random = myarray[Math.floor(Math.random() * myarray.length)]; //alert(random); document.getElementById("message").innerHTML=random; }

 #btnSearch { color: white; background-color: green; border: none; padding: 10px; font-family: verdana; font-weight: bold; } h1 { text-shadow: -2px 0 green, 0 2px green, 2px 0 green, 0 -2px green; } body { background-image: url("http://www.publicdomainpictures.net/pictures/20000/velka/green-christmas-background.jpg"); } #generator { display: block; margin: auto; text-align: center; background-color: #ff7878; border: solid; border-color: red; height: 250px; max-height: 250px; } .fa-snowflake-o { padding: 15px; color: white; } .fa-gift { padding: 15px; color: #ff0000; } .fa-tree { padding: 15px; color: #378b29; } #message { padding-top: 25px; padding-bottom: 25px; font-family: verdana; font-size: 20px; font-weight: bold; } .spin { -webkit-animation: spin 1s infinite linear; -moz-animation: spin 1s infinite linear; -o-animation: spin 1s infinite linear; animation: spin 5s infinite linear; -webkit-transform-origin: 50% 58%; transform-origin:50% 58%; -ms-transform-origin:50% 58%; /* IE 9 */ } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

 <head> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'> <h1 style="text-align: center; color: red; font-family: verdana; font-weight: bold;">WHAT CHRISTMAS MOVIE SHOULD I WATCH?</h1> </head> <body> <div class="container"> <div id="generator" style="padding-top: 10px;"> <p> <i class="fa fa-snowflake-o fa-5x spin"></i> <i class="fa fa-gift fa-5x spin"></i> <i class="fa fa-tree fa-5x spin"></i> </p> <input type="button" id="btnSearch" value="What Christmas Movie Should I Watch?" onclick="GetValue();" /> <p id="message"></p> </div> </div> </body>

Answer 1

只需將其放入二維數組中，這樣的工作就可以了。

var arr = [
        ["Movie Name 1", "Picture URL 1"],
        ["Movie Name 2", "Picture URL 2"],
        ["Movie Name 3", "Picture URL 3"],
        ["Movie Name 4", "Picture URL 4"],
        ["Movie Name 5", "Picture URL 5"]
];
var random = myarray[Math.floor(Math.random() * myarray.length)];

document.getElementById("picture").src=random[1];
document.getElementById("message").innerHTML=random[0];

如何將圖像添加到此隨機數組？

問題描述

1 個解決方案

解決方案1
0 已采納 2017-11-15 23:11:36

如何將圖像添加到此隨機數組？

問題描述

1 個解決方案

解決方案1 0 已采納 2017-11-15 23:11:36

解決方案1
0 已采納 2017-11-15 23:11:36