Javascript 如何使用包含图像 url 的 JS 数组设置背景 html 正文的图像

发布于05月05日

I am creating Digital Clock page. I want to set background of body to various images randomly as we refresh the page, or visit it again.
我有一个包含url/本地文件数组元素的JavaScriptarray.
我试着用jQuery设置背景，但有些东西坏了.
这是工作，但我想要更多的背景图像.

下面是我的代码:

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

问题

图像URL数组不指向任何位置(404).

clock()功能(最初是load())在几秒钟后冻结.

当小时、分钟和秒变为一位数或两位数时，文本会左右移动.

Some CSS values are wrong

垂直对齐:居中

填充:居中

线条高度:0

~~虽然没有问题，但<script>个标签中99%应该放在结束</body>个标签之前.~~

解决

添加了指向图像的URLarray.生成一个函数bgSwitch()，生成0到array.length -1范围内的随机数(记住数组是基于0的索引)，并将background-image分配给<body>.
将setInterval()移到clock()函数之外，并更正了第一个参数:
```
setInterval(clock, 1000)
```
将HMS的字体改为单空格类型，并将HMS的填充字体改为.toString().padStart()；现在时钟不动了.
删除了所有不正确的CSS，因为即使它们有正确的值，也会无效或对样式有害，因为它们在错误的 Select 器上.此外，CSS和HTML在中心、美观性、响应性和语义方面也略有改变.
还删除了<body>上的onload事件处理程序，这是不需要的.只需在103中提到的位置放置<script>个标签，就可以像平常一样调用函数.

普朗克

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

Javascript 如何使用包含图像 url 的 JS 数组设置背景 html 正文的图像

推荐答案

问题

解决

普朗克

Javascript相关问答推荐

如何为GrapesJS模板编辑器创建自定义撤销/重复按钮？

React Code不在装载上渲染数据，但在渲染上工作

配置WebAssembly/Emscripten本地生成问题

切换时排序对象数组，切换不起作用

你怎么看啦啦队的回应？

无法从NextJS组件传递函数作为参数'

加载背景图像时同步旋转不显示的问题

使用POST请求时，Req.Body为空

在HTML语言中调用外部JavaScript文件中的函数

第三方包不需要NODE_MODULES文件夹就可以工作吗？

Rxjs流中生成IMMER不能在对象上操作

以编程方式聚焦的链接将被聚焦，但样式不适用

如何通过Axios在GraphQL查询中发送数组

在GraphQL解析器中修改上下文值

我在哪里添加过滤器值到这个函数？

将字体样式应用于material -UI条形图图例

需要从对象生成列表

错误400：当我试图在React中使用put方法时，该字段是必需的

ReactJS Sweep Line：优化SciChartJS性能，重用wasmContext进行多图表渲染

如何在HTML中使用rxjs显示动态更新