Javascript 点击按钮后是否更改为随机背景图像和相应文本？

假设我有一定数量的图片，我想作为背景，完全覆盖在我的网站上

对于每个背景图像，我希望在屏幕中央显示一个特定的文本

每个背景图像及其对应的文本都应该随机化，只需点击一个按钮

我现在不需要任何JavaScript或jQuery，这似乎是解决方案。不过，我还没有找到解决我问题的好代码。有没有代码可以满足我的要求

谢谢

网站演示。

---

HTML:

<div id="background">
    <div id="box">
        <div class="title">TITLE OF WEBSITE</div>
        <div class="text">Text corresponding to the specfic background shown.</div>
        <div class="button">
            <button type="button">Randomizing button</button>
        </div>
    </div>
</div>

html, body {
    height: 100%;
}
#background {
    height: 100%;
}
#box {
    background: #fff;
    width: 40%;
    min-width: 400px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    top: 40%;
    position: relative;
}
.title {
    width: 100%;
    height: 50px;
    float: left;
    background: #e1e1e1;
    text-align: center;
    font-size: 24px;
    line-height:50px;
}
.text {
    background: #c8c8c8;
    width: 100%;
    height: 100px;
    float: left;
    text-align: center;
    font-size: 18px;
    position: relative;
    padding-top: 20px;
}
.button {
    width: 100%;
    height: 50px;
    float: left;
    text-align: center;
    background: #afafaf;
}

HTML：

<div id="background">
    <div id="box">
        <div class="title">TITLE OF WEBSITE</div>
        <div class="text" id="text">Text corresponding to the specfic background shown.</div>
        <div class="button">
            <button type="button" id="btn">Randomizing button</button>
        </div>
    </div>
</div>

var bks=new Array("http://jsfiddle.net/img/logo.png","http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b");
/* This Array 'bk' will hold the random images you want to set as background */
var desc=new Array("JSFIDDLE LOGO","SO SPRITE");
/* This array 'desc' will hold the description of respective image  want to display */
var bk=document.getElementById("background");
var div=document.getElementById("text");
var btn=document.getElementById("btn");
var count=0;
function doIT(){
bk.style["background"]="url('"+bks[count]+"') center center";
    div.innerHTML=desc[count];
    count=count?0:1;
    /* To Change the count randomly use :
     count=Math.floor( Math.random() * ( bks.length - 0 ) ) + 0;
      SEE: http://jsfiddle.net/cu7jcz8m/7/
    */
}

btn.addEventListener("click",doIT);

---

希望能有帮助。干杯：）

我已经更新了你的JSFIDLE

HTML（刚刚添加了ID）

---

那么，你的问题是什么？@vikar你提出问题的方式似乎更好。但在SO中要求完整的逻辑是严格不被接受的。你最好展示你迄今为止尝试过的东西，然后提出你的疑问…@Alek我还没有JavaScript。我找到了一些代码，但它与我的页面上的HTML和CSS设置不兼容。@vikar这样做的目的是在您陷入困境时提供帮助，而不是为您创建整个程序。太好了！非常感谢。是否可以添加，以便活动背景不会随机显示在其后面？是否也可以使所有的背景尺寸始终“覆盖”整个页面？这太棒了！我有一个快速的问题，如果我在本地有所有这些文件而不使用url，“imageUrl”会是什么样子。我可以使用/images/test1.jpg吗？

<div id="background">
    <div id="box">
        <div class="title">TITLE OF WEBSITE</div>
        <div class="text" id="text-box">Text corresponding to the specfic background shown.</div>
        <div class="button">
            <button type="button" id="my-button">Randomizing button</button>
        </div>
    </div>
</div>

var myData = { // Create a JSON for your images
    1: {
        imageUrl: "http://lorempixel.com/800/800/cats/1",
        text: "This is the text for image 1"
    }, 
    2: {
        imageUrl: "http://lorempixel.com/800/800/cats/2",
        text: "This is the text for image 2"
    }, 
    3: {
        imageUrl: "http://lorempixel.com/800/800/cats/3",
        text: "This is the text for image 3"
    }, 
    4: {
        imageUrl: "http://lorempixel.com/800/800/cats/4",
        text: "This is the text for image 4"
    }, 
    5: {
        imageUrl: "http://lorempixel.com/800/800/cats/5",
        text: "This is the text for image 5"
    }, 
    6: {
        imageUrl: "http://lorempixel.com/800/800/cats/6",
        text: "This is the text for image 6"
    }, 
    7: {
        imageUrl: "http://lorempixel.com/800/800/cats/7",
        text: "This is the text for image 7"
    }, 
    8: {
        imageUrl: "http://lorempixel.com/800/800/cats/8",
        text: "This is the text for image 8"
    }, 
    9: {
        imageUrl: "http://lorempixel.com/800/800/cats/9",
        text: "This is the text for image 9"
    }, 
    10: {
        imageUrl: "http://lorempixel.com/800/800/cats/10",
        text: "This is the text for image 10"
    }
};
function changeImage(){
    var randomNumber = Math.floor((Math.random() * 10) + 1); //Change 10 to the number of images in your JSON
    document.getElementById("background").style.background = "url('"+myData[randomNumber].imageUrl+"')";
    document.getElementById("text-box").innerHTML = myData[randomNumber].text;
}

document.getElementById("my-button").addEventListener("click",changeImage); //Bind the button to the changeImage function