如何使用包含 url 图片的 JS 数组设置背景图片 html body？

Question

我正在创建数字时钟页面。我想将 body 的背景设置为当我们刷新页面或再次访问它时随机出现各种图像。
我有 JavaScript 个数组，其中包含 url/local 个文件的数组元素。
我尝试使用 jQuery 设置背景，但有些东西坏了。 https://codepen.io/nisoojadhav/full/oNEXWdg
这是有效的，但我想要更多 background-images。

下面是我的代码：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <title>Clock</title>
  <style>
p {
  font-family: 'Bungee', cursive;
  font-size: 100px;
  color: white;
  text-shadow: 2px 3px 2px rgb(0, 0, 0);
  padding-top: 0px;
  padding: center;
}
div{
  vertical-align: center;
  text-align: center;
}   
body {
  background: url(https://github.com/NisooJadhav/clock/blob/main/5.jpg?raw=true);
  background-size: 100%;
}

@media screen and (max-width:650px) {
  p {
    font-size: 60px;
    line-height:0;

  }

  body {
    background-size: 300%;
  }
}
  </style>

  <script>
    function load() {
      var d = new Date
      var h = d.getHours()
      var m = d.getMinutes()
      var s = d.getSeconds()
      //alert(h+":"+m+":"+s)
      document.getElementById("h").innerHTML = h + " : " + m + " : " + s;
      setInterval("load()", 1000);
    }
  </script>

  <script>
        var bgImg = ['https://github.com/NisooJadhav/clock/blob/main/1.jpg','https://github.com/NisooJadhav/clock/blob/main/2.jpg','https://github.com/NisooJadhav/clock/blob/main/3.jpg','https://github.com/NisooJadhav/clock/blob/main/4.jpg','https://github.com/NisooJadhav/clock/blob/main/5.jpg','https://github.com/NisooJadhav/clock/blob/main/6.jpg','https://github.com/NisooJadhav/clock/blob/main/7.jpg']
        var selectBG = bgImg[Math.floor(Math.random() * bgImg.length)];
        //var r = Math.floor(Math.random() * 10)
        $(document).ready(function()
        {
            $('body').css({"background-image":"url(' + selectBG + ')"});
        });
  </script>
</head>

<body onload="load()">
  <div>
    <p id="h"></p>
  </div>
</body>

</html>

Answer 1

您的代码存在三个严重问题。

#1 - 您还没有导入 jQuery

如果您查看控制台，您会很容易发现收到 $ is not defined 错误。这会给你一个结论，你甚至没有在你的 HTML.

中导入 jQuery

解决方案：导入jQuery最简单的方法是通过他们的cdn。在其他脚本标签之前添加脚本标签。

#2 - 您的数组不包含原始图片

例如，您 linking“https://github.com/NisooJadhav/clock/blob/main/6.jpg”，但它应该是“https://github .com/NisooJadhav/clock/blob/main/6.jpg?raw=true”。注意最后的 ?raw=true 到 link 到原始图片，否则你只是 linking 到 github.

的网页

#3 - 模板文字不正确

您在 "url(' + selectBG + ')" 处的模板文字根本不正确，这不是 JS 的工作方式。请参阅 Template literals 上的 mdn 文档并自学！

结论

你只是在以一种混乱的方式工作，没有适当的调试。以后在写代码的时候，试着一步步过一遍。不要一次做所有事情，因为你会感到困惑并最终得到非常令人沮丧的代码。

还要确保你理解你所做的一切，否则你最终会陷入困境。如果你不明白你在做什么，或者你不明白JS的某个方面是如何工作的，那么就去看看docs/tutorials比如MDN or YouTube祝你好运！

Answer 2

后台功能不工作主要有两点。您使用的 URL 不正确。例如：

<img src='https://github.com/NisooJadhav/clock/blob/main/1.jpg' />

应该是：

<img src='https://raw.githubusercontent.com/NisooJadhav/clock/main/1.jpg' />

另一个问题在这一行$('body').css({"background-image":"url(' + selectBG + ')"});

看看它如何控制日志：

let selectBG = 'random string'

console.log("url(' + selectBG + ')")

我是这样改的：

let selectBG = 'random string'

console.log(`url(${selectBG})`)

固定码

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <title>Clock</title>
  <style>
p {
  font-family: 'Bungee', cursive;
  font-size: 100px;
  color: white;
  text-shadow: 2px 3px 2px rgb(0, 0, 0);
  padding-top: 0px;
  padding: center;
}
div{
  vertical-align: center;
  text-align: center;
}   
body {
  background-image: url('https://raw.githubusercontent.com/NisooJadhav/clock/main/7.jpg');
  background-size: 100%;
}

@media screen and (max-width:650px) {
  p {
    font-size: 60px;
    line-height:0;

  }

  body {
    background-size: 300%;
  }
}
  </style>

  <script>
    function load() {
      var d = new Date
      var h = d.getHours()
      var m = d.getMinutes()
      var s = d.getSeconds()
      document.getElementById("h").innerHTML = h + " : " + m + " : " + s;
      setInterval("load()", 1000);
    }
  </script>

  <script>
        var bgImg = ['https://raw.githubusercontent.com/NisooJadhav/clock/main/1.jpg','https://raw.githubusercontent.com/NisooJadhav/clock/main/2.jpg','https://raw.githubusercontent.com/NisooJadhav/clock/main/3.jpg','https://raw.githubusercontent.com/NisooJadhav/clock/main/4.jpg','https://raw.githubusercontent.com/NisooJadhav/clock/main/5.jpg','https://raw.githubusercontent.com/NisooJadhav/clock/main/6.jpg','https://raw.githubusercontent.com/NisooJadhav/clock/main/7.jpg']
        var selectBG = bgImg[Math.floor(Math.random() * bgImg.length)];
       
        $(document).ready(function()
        {
            $('body').css({'background-image':`url(${selectBG})`});
        });
  </script>
</head>

<body onload="load()">
  <div>
    <p id="h"></p>
  </div>
</body>

</html>

Answer 3

也许你的意思是这样的？

https://codepen.io/steru92/pen/xxYGLea

// array with urls
let imagesUrls = [
    url1, url2, ...
]

// function get random integer between two passed input
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

// get random integer passing values for array length bounds
const rndInteger = getRndInteger(0, imagesUrls.length - 1);

// get random image
const rndImage = imagesUrls[rndInteger];

// set body background with random image
document.body.style.backgroundImage = 'url("' + rndImage + '")';

Answer 4

问题

图像 url 数组指向没有位置 (404)。
clock() 函数（最初是 load()）在几秒钟后冻结。
当小时、分钟和秒变为个位数和两位数时，文本左右移动。
有些CSS值是错误的
- vertical-align: 中心
- 填充：居中
- line-height: 0
虽然没问题，但 99% 的 <script> 标签应该放在结束 </body> 标签之前。

解决方案

添加了一组指向图像的 url。制作了一个函数 bgSwitch()，它生成 0 到 array.length -1 范围内的随机数（记住数组是基于 0 的索引），并将 background-image 分配给 <body>。
将 setInterval() 移到 clock() 函数之外并更正了第一个参数：
```
setInterval(clock, 1000)
```
将 HMS 的字体更改为等宽字体并用零填充 HMS .toString().padStart()；现在时钟没有变化。
删除了所有不正确的 CSS，因为即使它们具有正确的值，它也会无效或对样式有害，因为它们位于错误的选择器上。此外，CSS 和 HTML 在居中、美观、响应能力和语义方面略有改变。
还删除了 <body> 上不需要的 onload 事件处理程序。只需将 <script> 标签放置在 问题 #5 中提到的位置，您就可以像往常一样调用函数。

PLUNKER

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clock</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Bungee&family=Noto+Sans+Mono:wght@600&display=swap');

      html {
        font: 2vmax/1 'Noto Sans Mono';
      }

      body {
        background: url(https://github.com/NisooJadhav/clock/blob/main/5.jpg?raw=true);
        background-size: 100%;
        overflow: hidden;
      }

      main {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        min-height: 100vh;
        margin: 0 auto;
      }

      time {
        display: inline-block;
        width: 50vw;
        height: 20vh;
        font-size: 4rem;
        line-height: 2;
        color: white;
        text-shadow: 2px 3px 2px rgb(0, 0, 0);
        text-align: center;
      }

      @media screen and (max-width: 650px) {
        html {
          font-size: 3vmax;
        }
        time {
          width: 90vw;
          font-size: 4rem;
        }
        body {
          background-size: cover;
        }
      }
    </style>
  </head>

  <body>
    <main>
      <time></time>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      const bgImg = [
        'https://github.com/NisooJadhav/clock/blob/main/5.jpg?raw=true/',
        'https://i.ibb.co/0m6612N/static.gif',
        'https://i.ibb.co/2cNgPHW/matrix.jpg',
        'https://i.ibb.co/LdQzP9j/wall1.jpg',
        'https://i.ibb.co/pKPKR1v/wall0.jpg',
      ];

      function clock() {
        const d = new Date();
        let h = d.getHours().toString().padStart(2, '0');
        let m = d.getMinutes().toString().padStart(2, '0');
        let s = d.getSeconds().toString().padStart(2, '0');
        document.querySelector('time').innerHTML = h + ':' + m + ':' + s;
      }

      function bgSwitch(array) {
        const randomRng =
          Math.floor(Math.random() * (array.length - 1 - 0 + 1)) + 0;
        let current = bgImg[randomRng];
        document.body.style.cssText = `background: url(${current})`;
      }

      bgSwitch(bgImg);
      setInterval(clock, 1000);
    </script>
  </body>
</html>

如何使用包含 url 图片的 JS 数组设置背景图片 html body？

How to set images of background html body using JS Array containing url of images?

html

javascript

css

arrays

jquery

#1 - 您还没有导入 jQuery

#2 - 您的数组不包含原始图片

#3 - 模板文字不正确

结论

固定码

问题

解决方案

PLUNKER