Javascript/Html/CSSランダム背景画像と2つのjavascript配列の単語

ようこそフォーラムへ！今日私は言語Javascript/html/css/phpで少しコードを作成したかったのですが、問題が残っていました。（私はどこでもこの問題を探しましたが、結果はありません）Javascript/Html/CSSランダム背景画像と2つのjavascript配列の単語

私の問題は=>私のjsファイルに2つの配列があります。最初にディレクトリから画像を保存し、2番目の画像はMath（）でランダムに選択したい単語を保存します。#indexes 私のコードですべてを読むことができます。私は彼らにコメントした。 jQueryを使って

window.onload = chooseGame; 
 

 
var cGamePic = new Array("football.jpg","baseball.jpg"); 
 
var cGameName = new Array("football","baseball"); 
 
function chooseGame; 
 
\t var rnd_num = Math.floor(Math.random() * cGamePic.length); 
 
\t document.getElementById("comp1Game").src = cGamePic(rnd_num); 
 
    document.getElementById("??").?? = cGameName(rnd_num);

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Random pics</title> 
 
\t \t <script src="rnd.js"></script> 
 
\t \t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="container1"> 
 
\t \t \t <h1>Some text 1</h1> 
 
\t \t \t <!--The next line will be displayed,but not randomly. 
 
\t \t \t And I want it to the left-side of screen,as background image. 
 
\t \t \t Like: the text "Some text 1" will be displayed in the random selected image. 
 
\t \t \t (The some text 1 is selected randomly too,as "football") 
 
\t \t \t --> 
 
\t \t \t \t <img src="res/images/football.jpg" id="comp1Game" alt="Compare1"> 
 
\t \t </div> 
 
\t 
 
\t \t <div id="container2"> 
 
\t \t \t <h1>Some text 2</h1> 
 
\t \t \t <!-- The future container to see the 2nd selected image & word in it (right side of screen) 
 
\t \t \t Like,if js select number 6,the word and image will be "baseball" and "baseball.jpg" 
 
\t \t \t Shortly,I want to do it. 
 
\t \t \t --> 
 
\t \t </div> 
 
\t </body> 
 
</html>

出典

2016-07-29 LeFizzy

簡単：

は

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Random pics</title> 
     <script src="rnd.js"></script> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<script> 
    var cGamePic = new Array("football.jpg","baseball.jpg"); 

    $(document).ready(function() { 
     chooseGame(); 
    }); 

    function chooseGame(){ 
     var pic = cGamePic[Math.floor(Math.random()*cGamePic.length)]; 
     var name = pic.replace(/^.*[\\\/]/, ''); 

     $("#comp1Game").attr("src",pic); 
     $("#container1 h1").html(name); 
    } 
</script> 

    </head> 
    <body> 
     <div id="container1"> 
      <h1>Some text 1</h1> 
      <img src="res/images/football.jpg" id="comp1Game" alt="Compare1"> 
     </div> 
    </body> 
</html>

出典

2016-07-29 09:21:11 polamoros

だからそれは何ですか？私は実際に "var name = pic.replace"という行を理解していません。 rnd.jsはまだ同じで、私はそれが必要ですか？とにかく、ありがとう！ :) – LeFizzy

"var name = pic.replace"では、パスからベース名を抽出できるので、cGameName配列は不要です。 rnd.jsを使用する必要はありません。 ;） – polamoros

だけで作ることの単純な

配列で[GameName]と[GamePicture]の値が同じインデックスにある場合、単にを以下のスニペットに続いて

var cGamePic = new Array("football.jpg","baseball.jpg"); 
var cGameName = new Array("football","baseball"); 
var randomItem = Math.floor(Math.random() * cGamePic.length); 
var comp1GameTitle = document.querySelector("#container1 h1");//Heading from main container 
var comp1GameImage = document.querySelector("#container1 img");//Image from main container 
comp1GameTitle.innerHTML = cGameName[randomItem]; //Random Title 
comp1GameImage.src=cGamePic[randomItem]; //Random image

Demo

出典

2016-07-29 09:49:07 Sridhar

CGameName配列の値をCGamePicと違うものに変更しても、両方の配列値が同じインデックスに配置されるようにしてください。 – Sridhar

Jqueryライブラリを使用する必要はありません。普通のjavascriptで試してください – Sridhar

これを使って* 2 *の背景イメージを生成する方法の例を表示できますか？（画面の左側と画面の右側に1つ。 | IMG]？画像に* 2つのテキストをレンダリングする方法を教えてもらえますか？ – LeFizzy

Javascript/Html/CSSランダム背景画像と2つのjavascript配列の単語

答えて

関連する問題