如何每天更換背景？ -有解無憂

我有一個網頁，我想每天把背景換成不同的。我總共有4張圖片，所以我想回圈使用它們。我怎樣才能做到這一點呢？

編輯：根據評論，我似乎不能只用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" />
   css" type="text/css" media="all" /> 
</head> 

<body> 
    <section class="main-section"> 
        <div class="main-division">/span>
            <div class="wrapper"> 
                <div class="main-cover" >
                 內容
                </div> 
            </div>/span>
        </div>/span>
    </section>/span>
</body> 

</html>/span>

感謝您的幫助

。

預先感謝！

uj5u.com熱心網友回復：

你可以用一點Javascript來完成這個任務。

。

let element = document. querySelector('.change-my-colour') 。
/* .在你的代碼中把它改為.main-division ^^^ */
let date = new Date()。

switch(date.getDay()) { /* using date.getDate() instead for days of the month */
  case 0: /* 星期日 */
    element.style.background = "red"。
    break;
  case 1: /* Monday */
    element.style.background = "橙色"。
    break;
  case 2: /* Tuesday */: /* Tuesday */.
    element.style.background = "黃"。
    break;
  /* etc... */
  default:
    break;
}

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

< div class="change-my-colour"></div>

將上面的顏色改為您希望在每一天顯示的圖片（使用與您的css中相同的形式，但用引號包裹）。

另外，如果你不熟悉Javascript，在你的網站中包含它的最簡單方法是使用script標簽。

uj5u.com熱心網友回復：

請看下面的例子。

。

$(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", "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>/span>
<section class="main-section">/span>
  <div class="main-division">/span>
    <div class="wrapper"> 
      <div class="main-cover">/span>
        內容
      </div>內容
    </div>/span>
  </div>/span>
</section>/span>

使用一個陣列，你可以存盤（或收集）影像路徑。你可以根據星期幾（0-6）選擇一個索引，并使用模數運算子來幫助確保index總是正確的或在范圍內。

uj5u.com熱心網友回復：

使用setInterval(backgroundChange, 86400000);這樣，函式backgroundChange將以每24小時（=86400000ms）的間隔運行。然后你可以定義一個函式backgroundChange()來改變背景。

你可以嘗試不同的方法，使用星期或月份的日期作為輸入值
。你可以使用if elseIf回圈，就像下面的片段：

。

backgroundImages = ['urlImage1', 'urlImage2'/span>, 'urlImage3'/span>, 'urlImage4'/span>]。

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

if (dayOfWeek == "0"/span>) {
  document.querySelector('.main-division').style. backgroundImage = "url("/span>   backgroundImages[dayOfWeek]   ")"。
} else if (dayOfWeek == "1"/span>) {
  document.querySelector('.main-division').style. backgroundImage = "url("/span>   backgroundImages[dayOfWeek]   ")"。
} else if (dayOfWeek == "2"/span>) {
  document.querySelector('.main-division').style. backgroundImage = "url("/span>   backgroundImages[dayOfWeek]   ")"。
} else if (dayOfWeek == "3"/span>) {
  document.querySelector('.main-division').style. backgroundImage = "url("/span>   backgroundImages[dayOfWeek]   ")"。
} else if (dayOfWeek == "4"/span>) {
  document.querySelector('.main-division').style. backgroundImage = "url("   backgroundImages[dayOfWeek - 4]   ") "。
} else if (dayOfWeek == "5"/span>) {
  document.querySelector('.main-division').style. backgroundImage = "url("/span>   backgroundImages[dayOfWeek - 4]   ")"。
} else if (dayOfWeek == "6"/span>) {
  document.querySelector('.main-division').style. backgroundImage = "url("/span>   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" />
   css" type="text/css" media="all" /> 
</head> 

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

</html>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/321594.html

標籤：

上一篇：如何在C#中計算復選框的值

下一篇：匯編中的主題依賴資源