如何每天而不是每次刷新頁面時隨機化背景圖像

Question

<script type="text/javascript"> $(function () { var images = [ "d1.png", "d2.png", "d3.png", "d4.png", "d5.png", "d6.png", "d7.png", "d8.png", "d9.png", "d10.png", ]; $("#bridge").css({ "background-image": "url(images/slider/" + images[Math.floor(Math.random() * images.length)] + ")", }); }); </script>

Answer 1

試試這個。

const DAY = (24 * 60 * 60 * 1000);
var images = ['d1.png', 'd2.png', 'd3.png', 'd4.png','d5.png', 'd6.png', 'd7.png','d8.png', 'd9.png', 'd10.png'];
let currentDay = Math.floor(Date.now() / DAY);
let saved = localStorage.getItem('random_image');
if (saved) saved = JSON.parse(saved);
if (!saved || saved.day != currentDay) {
  saved = {
    day: currentDay,
    index: Math.floor(Math.random() * images.length),
  };
  localStorage.setItem('random_image', JSON.stringify(saved))
}
let image = images[saved.index];
console.log(image);

它使用 LocalStorage 來記住最后一個隨機生成的圖像是什么。 如果這一天不同，它將生成一個新的。

Answer 2

Here is how the code looks like after adding the one above:  

<script type="text/javascript">
   $(function() {
const DAY = (24 * 60 * 60 * 1000);
var images = ['d1.png', 'd2.png', 'd3.png', 'd4.png','d5.png', 'd6.png', 'd7.png','d8.png', 'd9.png', 'd10.png'];
let currentDay = Math.floor(Date.now() / DAY);
let saved = localStorage.getItem('random_image');
if (saved) saved = JSON.parse(saved);
if (!saved || saved.day != currentDay) {
  saved = {
    day: currentDay,
    index: Math.floor(Math.random() * images.length),
  };
  localStorage.setItem('random_image', JSON.stringify(saved))
}
let image = images[saved.index];
console.log(image);

    $('#bridge').css({'background-image': 'url(images/slider/' + images[Math.floor(Math.random() * images.length)] + ')'});
        }); 
  </script>