试图创建随机背景图像的主页，每次访问.使用HTML和JavaScript.我做错了什么?

Trying to Create Homepage with Random Background Image Each Time it is Accessed. Using HTML and JavaScript. What am I doing wrong?

本文关键字：JavaScript HTML 使用 什么 错了 访问 背景 随机 创建 图像 主页      更新时间：2023-09-26

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

我已经尝试在一些帮助下编码，但不知道我错在哪里。

这是我正在使用的代码

<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>

我的网站的zip是在https://www.sendspace.com/file/2la4he。任何反馈都是感激的。

这里有几个问题。首先，document.getElementByTagName("div.main")是无效的，因为没有称为"getElementByTagName"的函数，您想要的是"getElementsByTagName"(注意额外的"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/

你的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] + "')"
}

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

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对象(不需要访问第一个位置的数组与[0] w3schools解释)。

相关文章：