每次尝试使用随机背景图像创建主页时。使用HTML和JavaScript。我究竟做错了什么？

Question

我正在尝试制作多个背景图像的数组，并让浏览器随机选择一个显示。

我尝试在一些帮助下进行编码，但不知道我要去哪里。

这是我正在使用的代码

<head>
<meta charset="utf-8">
<title>Christopher Tameji Foose</title>
<script src="chrisfoose.js">

var imgSrcArr = ["/background/000.jpg", "/background/001.jpg", "/background/003.jpg"]

    window.onload = function() {
            var randNum = Math.floor(Math.random() * 3);
        console.log(randNum);   document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')";
        }

</script>
<link rel="stylesheet" href="stylesheet.css">

    ;<script>

    ;</script>

我的网站的压缩文件位于https://www.sendspace.com/file/2la4he 。 任何反馈表示赞赏。

Answer 1

您在这里有几个问题。 首先， document.getElementByTagName("div.main")无效，因为没有名为“ getElementByTagName”的函数，您需要的是“ getElement s ByTagName”（注意多余的“ s”）。

其次，您的目标div具有一个ID，因此与其遍历所有标签并选择所需的标签，不如直接使用getElementById() 。

var imgSrcArr = ["/background/000.jpg", "/background/001.jpg", "/background/003.jpg"]
window.onload = function() {
    var randNum = Math.floor(Math.random() * 3);
    document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')";

这是一个小提琴： http : //jsfiddle.net/fvo6v0vL/

Answer 2

您的javascript语法错误。 是getElementsByTagName 。 您缺少“ s”。

另外，我建议您使用getElementById ，那样您仅选择一个main对象：

var imgSrcArr = ["/background/000.jpg", "/background/001.jpg", "/background/003.jpg"]

window.onload = function() {
    var randNum = Math.floor(Math.random() * 3);
    document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')"
}

Answer 3

您可以运行下面的代码片段以查看结果：

 var imgSrcArr = ["http://www.hdwallpapers.in/walls/running_horse-wide.jpg", "http://www.hdwallpapers.in/walls/colorful_background-wide.jpg", "http://www.hdwallpapers.in/walls/moonlight_cruise-wide.jpg"] window.onload = function() { var randNum = Math.floor(Math.random() * 3); document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')" }

 a {text-decoration: none;color: white} .left {float: left;} .right {float: right;} .center {float: center;} div.main { margin: auto; height: 500px; width: 500px; background-position: center; backgroud-repeat: no-repeat border: 1px solid black; } body {background-color: black;} #main { width: 1000px; margin: 0 auto; } #vid { width: 1200px; text-align: center; } #circle {position: fixed;z-index: 1;} #buttonred { width: 100px; height: 100px; border-radius: 100%; background-color: red; border-style: solid; text-align: center; } #buttonblue { width: 100px; height: 100px; border-radius: 100%; background-color: blue; border-style: solid; text-align: center; } #buttongreen { width: 100px; height: 100px; border-radius: 100%; background-color: green; border-style: solid; text-align: center; } #buttonpink { width: 100px; height: 100px; border-radius: 100%; background-color: pink; border-style: solid; text-align: center; } #buttonorange { width: 100px; height: 100px; border-radius: 100%; background-color: orange; border-style: solid; text-align: center; } #buttonback { witdth: 100px; height 100px; border-radius: 100%; background-color: red; border-style: solid; text-align: center; } ; table.center { background-color: white; margin-left: auto; margin-right: auto; } table.center { width: 70%; margin-left: 200px; margin-top: 300px; color: white; } p { font-family: Arial, Terminal, Times New Roman; margin-top: 30px; font-color: white; line-height: 100px; margin: 0; } p.bio { font-family: Terminal, Arial; color: black; } td.bio { background-color: white; font-family: Courier, Terminal, Arial; padding: 50px; } table.bio { width: 70%; margin-left: 300px; margin-top: 150px; } table.video { width: 85%; margin-left: 150px; margin-top: 200px; } table.graphics { width: 85%; margin-left: 50px; margin-top: 150px; background-color: black; border: 1px border-color: white; } td.graphics { border: 1px solid white; align: center; } #videobanner { width: 150px; height: 50px; background-color: grey; text-align: center; margin-top: 1px; margin-bottom: 20px; color: white; } p.video { font-family: Arial; font-size: large; color: white; text-align: center; font-size: 18px; margin-top: 5px; }

 <div id="main" class="main"> ; <table class="center" id="tablecenter"> <td> <div id="buttonred"> <p><a href="who.html">Who?</a> </p> </div> </td> <td> <div id="buttonblue"> <p><a href="resume.html">Resume / CV</a> </p> </div> </td> <td> <div id="buttongreen"> <p><a href="video.html">Video</a> </p> </div> </td> <td> <div id="buttonpink"> <p><a href="graphics.htm">Graphics</a> </p> </div> </td> <td> <div id="buttonorange"> <p>Projects</p> </div> </td> ;</table> </div>

我改用了getElementById ，您可以直接通过它访问style对象（如w3schools所解释的，无需使用[0]访问数组的第一个位置）。

每次尝试使用随机背景图像创建主页时。使用HTML和JavaScript。我究竟做错了什么？

问题描述

3 个解决方案

解决方案1
1 2015-05-29 17:10:42

解决方案2
0 2015-05-29 17:10:32

解决方案3
0 2015-05-29 17:15:16

每次尝试使用随机背景图像创建主页时。 使用HTML和JavaScript。 我究竟做错了什么？

问题描述

3 个解决方案

解决方案1 1 2015-05-29 17:10:42

解决方案2 0 2015-05-29 17:10:32

解决方案3 0 2015-05-29 17:15:16

每次尝试使用随机背景图像创建主页时。使用HTML和JavaScript。我究竟做错了什么？

解决方案1
1 2015-05-29 17:10:42

解决方案2
0 2015-05-29 17:10:32

解决方案3
0 2015-05-29 17:15:16