Javascript/Html/Css Случайное фоновое изображение и слово из двух массивов javascript

Добро пожаловать на форум! Сегодня я хотел немного закодировать язык Javascript/html/css/php, но я застрял в проблеме. (Я искал эту проблему повсюду, но никаких результатов.)Javascript/Html/Css Случайное фоновое изображение и слово из двух массивов javascript

Моя проблема => У меня есть два массива в моем js-файле. Первый хранит изображения из каталога, а второй хранит слова, которые я хочу выбрать случайным образом по Math() number #indexes Вы можете прочитать все в моих кодах. Я прокомментировал их.

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

Легче с JQuery:

<!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» вы можете извлечь basename из пути, поэтому массив 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

Можете ли вы показать пример того, как сгенерировать * два * фоновое изображение с этим (один в левой части экрана и один в правой части экрана. [IMG] IMG]? И если вы можете показать мне, как визуализировать * текст * на изображения? – LeFizzy

Javascript/Html/Css Случайное фоновое изображение и слово из двух массивов javascript

ответ

Смежные вопросы