每次刷新頁面時隨機背景圖像的代碼

Question

我正在處理一個 html 文件，該文件應該在每次刷新頁面時顯示一個新的背景圖像。 該 HTML 文件位於名為“Startsida”的目錄中。 圖像 backgroundphoto1、backgroundphoto2 和 backgroundphoto3 被放置在一個名為“images”的文件夾中。 我的代碼仍然有問題，我不知道如何修復它。

我不知道這是否值得注意，但這段代碼是在視覺工作室上制作的。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The randomator -->

    <script>
      var images = [
        "../images/photobackground1.jpg",
        "../images/photobackground2.jpg",
        "../images/photobackground3.jpg",
      ];
      function randomator() {
        document.getElementsByClassName("bg")[0].style.backgroundImage =
          "url(" + images[Math.floor(Math.random() * images.length)] + ")";
      }
      randomator();
    </script>

    <style>
      body,
      html {
        height: 100%;
        margin: 0;
      }

      .bg {
        /* Full height */
        height: 100%;

        /* Center and scale the image nicely */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

    </style>
  </head>
  <body>
    <div class="bg">randomator</div>
  </body>
</html>```

Answer 1

從您的代碼來看，您似乎對 HTML、JavaScript 和 CSS 的基本原理存在一些誤解。 我將按語言為您分解這些問題。 在最底部，您會發現一個完全固定的版本，可以完美運行。

HTML

結束標簽

必須打開和關閉帶有子元素的標簽。 你寫了：

<div> randomator.bg <div>

正確的語法是：

<div> randomator.bg </div>

如果結束標記中沒有斜杠，瀏覽器就無法知道元素的開始或結束位置。

課程

您不能通過簡單地在里面寫入.classname來將 class 給 HTML div 。 您必須將 class 屬性添加到開始標記。 你寫了：

<div> randomator.bg </div>

正確的語法是：

<div class="bg"> randomator </div>

JavaScript

行尾

分號只能用在 JavaScript 代碼行的最后。 你寫了：

randomator(); {
    ...
}

正確的語法是：

randomator() {
    ...
}

Function 定義

在定義 function 時，您必須提供function標識符或使用ES6 箭頭函數。 你寫了：

randomator() {
    ...
}

正確的語法是：

function randomator() {
    ...
}

Class 與 HTML 匹配

如果要更改其背景，則需要 select 正確的元素。 如果您一直按照上面的方法進行操作，那么您應該只有一個帶有bg的 class 的元素。 你寫了：

document.getElementsByClassName("mainview")[0].style.backgroundImage = "url(" + images[Math.floor(Math.random() * images.length)] + ")";

正確的語法是：

document.getElementsByClassName("bg")[0].style.backgroundImage = "url(" + images[Math.floor(Math.random() * images.length)] + ")";

CSS

JavaScript 與 CSS

JavaScript and CSS are two different languages, and though JavaScript does have the ability to change CSS properties, the two don't share variables. 你寫了：

background-image: mainview;

雖然您可以在技術上使用 JS 來更改CSS 變量，但沒有辦法完全做到這一點。 在您的情況下，我建議您完全刪除此行。

完整示例

下面的代碼應該可以完美運行 - 所有錯誤都已修復。

 var images = ["images/photokacround1.jpg", "images/photobackround2.jpg", "images/photobackround3.jpg"]; function randomator() { document.getElementsByClassName("mainview")[0].style.backgroundImage = "url(" + images[Math.floor(Math.random() * images.length)] + ")"; } randomator();

 body, html { height: 100%; margin: 0; }.mainview { /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }

 <div class="mainview"> randomator </div>

Answer 2

我解決了。 問題是我沒有提到 javascript。 在這部分...

var images = [ "../images/photobackground1.jpg", "../images/photobackground2.jpg", "../images/photobackground3.jpg", ]; function randomator() { document.getElementsByClassName("bg")[0].style.backgroundImage = "url(" + images[Math.floor(Math.random() * images.length)] + ")"; } 隨機器（）；

...應該提到 < script type="text/javascript"> 然后用 < script> 結束它。

當我使用它時，我應該寫

 <script type="text/javascript"> randomator(); </script>

我已經測試了代碼，它現在可以工作了：這是完整的代碼：

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1" /> <.-- The randomator --> <script type="text/javascript"> var images = [ ".,/images/bakgrundbilder/photobackground1.jpg". ".,/images/bakgrundbilder/photobackground2.jpg". ".,/images/bakgrundbilder/photobackground3;jpg". ]. function randomator() { document.getElementsByClassName("bg")[0].style.backgroundImage = "url(" + images[Math.floor(Math;random() * images;length)] + ")", } randomator(): </script> <style> body; html { height: 100%; margin. 0: };bg { /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size; cover; } </style> </head> <body> <div class="bg"> </body> <script type="text/javascript"> randomator(); </script> </html>

只是不要忘記替換背景圖像並正確引用它們！

每次刷新頁面時隨機背景圖像的代碼

問題描述

2 個解決方案

解決方案1
0 2021-12-28 17:04:28

HTML

結束標簽

課程

JavaScript

行尾

Function 定義

Class 與 HTML 匹配

CSS

JavaScript 與 CSS

完整示例

解決方案2
0 2021-12-29 16:03:58

每次刷新頁面時隨機背景圖像的代碼

問題描述

2 個解決方案

解決方案1 0 2021-12-28 17:04:28

HTML

結束標簽

課程

JavaScript

行尾

Function 定義

Class 與 HTML 匹配

CSS

JavaScript 與 CSS

完整示例

解決方案2 0 2021-12-29 16:03:58

解決方案1
0 2021-12-28 17:04:28

解決方案2
0 2021-12-29 16:03:58