如何每天更换背景？

Posted 2023-05-08

技术标签:

【中文标题】如何每天更换背景？【英文标题】：How to change background every day? 【发布时间】：2021-11-14 11:14:40 【问题描述】：

我有一个网页，我想每天更换不同的背景。我总共有 4 张图片，所以我想循环浏览它们。我该怎么做？

编辑：根据 cmets 的说法，我似乎无法单独使用 html 和 CSS 来做到这一点，所以我必须使用另一种语言。我该怎么做？

这是我的 CSS 和 HTML 的代码：

.main-section .main-division 
  background: url(../images/background-1.jpg) no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  align-items: center;
  display: grid;
  height:auto;
  max-width: 100%;

<!DOCTYPE html>
<html lang="zxx">

<head>
  <title>Test</title>
    <meta name="robots" content="noindex">
    <meta charset="UTF-8" />
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>

<body>
    <section class="main-section">
        <div class="main-division">
            <div class="wrapper">
                <div class="main-cover" >
                 CONTENT
                </div>
            </div>
        </div>
    </section>
</body>

</html>

您的帮助将不胜感激。

提前致谢！

【问题讨论】：

使用 javascript。 CSS 和 HTML 都没有时间的概念您必须使用脚本语言。 php、JavaScript 等你有多少张图片？ 365？：）我有 4 张照片。我想循环浏览它们并重复。如何使用 Javascript 或任何其他语言做到这一点？ 【参考方案1】：

您可以使用一些 Javascript 来完成此操作。以下 sn-p 将在一周中的每一天显示不同的颜色：

let element = document.querySelector('.change-my-colour');
/* .change this to .main-division in your code ^^^ */
let date = new Date();

switch(date.getDay())  /* use date.getDate() instead for days of the month */
  case 0: /* Sunday */
    element.style.background = "red";
    break;
  case 1: /* Monday */
    element.style.background = "orange";
    break;
  case 2: /* Tuesday */
    element.style.background = "yellow";
    break;
  /* etc... */
  default:
    break;

.change-my-colour 
  width: 100vw;
  height: 100vh;
  background: blue; /* default value */

&lt;div class="change-my-colour"&gt;&lt;/div&gt;

将上面的颜色更改为您希望每天显示的图像（使用与您的 css 中相同的形式，但用引号括起来）。

此外，如果您不熟悉 Javascript，将其包含在您的网站中的最简单方法是使用 script 标记。

【讨论】：

【参考方案2】：

考虑以下示例。

$(function() 
  var backgrounds = [
    "../images/background-1.jpg",
    "../images/background-2.jpg",
    "../images/background-3.jpg",
    "../images/background-4.jpg"
  ];

  var dt = new Date();
  var index = dt.getDay() % 4;

  $(".main-section .main-division").css("background-image", "url(" + backgrounds[index] + ")");
);

.main-section .main-division 
  background: url(../images/background-1.jpg) no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  align-items: center;
  display: grid;
  height: auto;
  max-width: 100%;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main-section">
  <div class="main-division">
    <div class="wrapper">
      <div class="main-cover">
        CONTENT
      </div>
    </div>
  </div>
</section>

使用数组，您可以存储（或收集）图像路径。您可以根据星期几 (0 - 6) 选择索引，并使用模数运算符来帮助确保 index 始终正确或在范围内。

【讨论】：

我添加了这个，但背景图片没有保留 CSS 的属性 @Darknicks 做了一个小更新，专门使用 background-image。【参考方案3】：

使用setInterval(backgroundChange, 86400000); 这样，函数backgroundChange 将以每24小时（=86400000ms）的间隔运行。然后你可以定义一个函数backgroundChange() 来改变背景。

您可以尝试不同的方法，使用工作日或月份日期作为输入值您可以使用if elseIf 循环，如下面的 sn-p ：

backgroundImages = ['urlImage1', 'urlImage2', 'urlImage3', 'urlImage4'];

var date = new Date();
var dayOfWeek = date.getDay();

if (dayOfWeek == "0") 
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
 else if (dayOfWeek == "1") 
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
 else if (dayOfWeek == "2") 
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
 else if (dayOfWeek == "3") 
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
 else if (dayOfWeek == "4") 
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek - 4] + ")";
 else if (dayOfWeek == "5") 
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek - 4] + ")";
 else if (dayOfWeek == "6") 
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek - 4] + ")";
 else 
  document.querySelector('.main-division').style.backgroundImage = "url(somebackup-image)";

.main-section .main-division 
  background: no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  align-items: center;
  display: grid;
  height: auto;
  max-width: 100%;

<!DOCTYPE html>
<html lang="zxx">

<head>
  <title>Test</title>
  <meta name="robots" content="noindex">
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>

<body>
  <section class="main-section">
    <div class="main-division">
      <div class="wrapper">
        <div class="main-cover">
          CONTENT
        </div>
      </div>
    </div>
  </section>
  <script src="If_JS_is_present_in_file_use_src_else_simply_write_inside_this_tag"></script>
</body>

</html>

【讨论】：

我将如何或在哪里添加此代码？在 JS 中将背景定义为图像的地方使用它除非您连续运行该网站一天，否则这只会显示您设置为初始背景的任何内容，如果您随机化初始背景，则每次重新加载网站时都会更改背景。我在 CSS 中定义了背景。你可以在 CSS 中添加 JavaScript 吗？还是我必须把它放在 HTML 标头中？ @Bdeering 你是对的，我忘记了，可以让 cookie 成为解决方案，或者服务器端引用更适合背景图片 url【参考方案4】：

结合@Rana 和@Twisty 的响应，我能够让它工作

这是生成的代码：

//Code on change-background.js

$(function() 
  var backgrounds = [
    "../images/background-1.jpg",
    "../images/background-2.jpg",
    "../images/background-3.jpg",
    "../images/background-4.jpg"
  ];

  var dt = new Date();
  var index = dt.getDay() % 4;

  document.querySelector('.main-division').style.backgroundImage = "url(" + backgrounds[index] + ")";
);

.main-section .main-division 
  background: url(../images/background-1.jpg) no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  align-items: center;
  display: grid;
  height:auto;
  max-width: 100%;

<!DOCTYPE html>
<html lang="zxx">

<head>
  <title>Test</title>
    <meta name="robots" content="noindex">
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <section class="main-section">
        <div class="main-division">
            <div class="wrapper">
                <div class="main-cover" >
                 CONTENT
                </div>
            </div>
        </div>
    </section>
    <script src="js/change-background.js"></script>
</body>

</html>

【讨论】：

以上是关于如何每天更换背景？的主要内容，如果未能解决你的问题，请参考以下文章

android button 点击后如何更换背景，然后点击其他按钮时该按钮背景换回来？

photoshop怎么抠图换背景

启用setInterval()定时器更换背景

如何更换 Ubuntu 18.04 LTS 的 GDM 登录界面背景

MFC中，对话框的背景如何更换？

怎样更换网站主题图片