Javascript 根据一天中的时间更新背景图像而无需刷新页面的最佳实践

所以我刚刚做了Brad Traversy的动态登录页教程。这是一个很好的教程，但我希望实现同样的效果，而不必刷新页面，以便在小时数<12、<16或以下代码中指定的其他时间看到背景图像的变化。更重要的是，我想知道实现这一目标的最佳或最合适的做法，而不是以任何可能的方式去做

如果需要进一步澄清我的问题，请询问

多谢各位

HTML


<time id="time"></time>
    <h1>
      <span id="greeting"></span>
      <span id="name" contenteditable="true"></span>
    </h1>

    <h2>What Is Your Focus For Today?</h2>
    <h2 id="focus" contenteditable="true"></h2>


JS

// DOM Elements
const time = document.getElementById('time'),
  greeting = document.getElementById('greeting'),
  name = document.getElementById('name'),
  focus = document.getElementById('focus');

// Options
const showAmPm = true;

// Show Time
function showTime() {
  let today = new Date(),
    hour = today.getHours(),
    min = today.getMinutes(),
    sec = today.getSeconds();

  // Set AM or PM
  const amPm = hour >= 12 ? 'PM' : 'AM';

  // 12hr Format
  hour = hour % 12 || 12;

  // Output Time
  time.innerHTML = `${hour}<span>:</span>${addZero(min)}<span>:</span>${addZero(
    sec
  )} ${showAmPm ? amPm : ''}`;

  setTimeout(showTime, 1000);
}

// Add Zeros
function addZero(n) {
  return (parseInt(n, 10) < 10 ? '0' : '') + n;
}

// Set Background and Greeting
function setBgGreet() {
  let today = new Date(),
    hour = today.getHours();

  if (hour < 12) {
    // Morning
    document.body.style.backgroundImage = "url('https://i.ibb.co/7vDLJFb/morning.jpg')";
    greeting.textContent = 'Good Morning, ';
  } else if (hour < 18) {
    // Afternoon
    document.body.style.backgroundImage = "url('https://i.ibb.co/3mThcXc/afternoon.jpg')";
    greeting.textContent = 'Good Afternoon, ';
  } else {
    // Evening
    document.body.style.backgroundImage = "url('https://i.ibb.co/924T2Wv/night.jpg')";
    greeting.textContent = 'Good Evening, ';
    document.body.style.color = 'white';
  }
}

// Get Name
function getName() {
  if (localStorage.getItem('name') === null) {
    name.textContent = '[Enter Name]';
  } else {
    name.textContent = localStorage.getItem('name');
  }
}

// Set Name
function setName(e) {
  if (e.type === 'keypress') {
    // Make sure enter is pressed
    if (e.which == 13 || e.keyCode == 13) {
      localStorage.setItem('name', e.target.innerText);
      name.blur();
    }
  } else {
    localStorage.setItem('name', e.target.innerText);
  }
}

// Get Focus
function getFocus() {
  if (localStorage.getItem('focus') === null) {
    focus.textContent = '[Enter Focus]';
  } else {
    focus.textContent = localStorage.getItem('focus');
  }
}

// Set Focus
function setFocus(e) {
  if (e.type === 'keypress') {
    // Make sure enter is pressed
    if (e.which == 13 || e.keyCode == 13) {
      localStorage.setItem('focus', e.target.innerText);
      focus.blur();
    }
  } else {
    localStorage.setItem('focus', e.target.innerText);
  }
}

name.addEventListener('keypress', setName);
name.addEventListener('blur', setName);
focus.addEventListener('keypress', setFocus);
focus.addEventListener('blur', setFocus);

// Run
showTime();
setBgGreet();
getName();
getFocus();


CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Quicksand', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  color: black;
}

#time {
  font-size: 8rem;
}

h1 {
  margin-bottom: 3rem;
}

h2 {
  margin-bottom: 0.5rem;
  opacity: 0.6;
}

@media (max-width: 700px) {
  #time {
    font-size: 6rem;
  }
}

HTML
你今天的重点是什么？
JS
//DOM元素
const time=document.getElementById（'time'），
greeting=document.getElementById（'greeting'），
name=document.getElementById（'name'），
focus=document.getElementById（'focus'）；
//选择权
const showAmPm=真；
//表演时间
函数showTime（）{
让今天=新日期（），
小时=今天。getHours（），
min=today.getMinutes（），
sec=today.getSeconds（）；
//设定上午或下午
常数amPm=hour>=12？'PM'：'AM'；
//12小时格式
小时=小时%12 | | 12；
//输出时间
time.innerHTML=`${hour}:${addZero（min）}:${addZero(
秒
)}${showAmPm？amPm:'}`；
设置超时（显示时间，1000）；
}
//加零
函数addZero（n）{
返回（parseInt（n，10）<10？'0'：''）+n；
}
//设置背景和问候语
函数setbgreet（）{
让今天=新日期（），
小时=今天。getHours（）；
如果（小时<12）{
//早晨
document.body.style.backgroundImage=“url（'https://i.ibb.co/7vDLJFb/morning.jpg')";
greeting.textContent='早上好'；
}否则，如果（小时<18）{
//下午
document.body.style.backgroundImage=“url（'https://i.ibb.co/3mThcXc/afternoon.jpg')";
greeting.textContent='下午好'；
}否则{
//晚上
document.body.style.backgroundImage=“url（'https://i.ibb.co/924T2Wv/night.jpg')";
greeting.textContent='晚上好'；
document.body.style.color='white'；
}
}
//得名
函数getName（）{
if（localStorage.getItem（'name'）==null）{
name.textContent='[输入名称]'；
}否则{
name.textContent=localStorage.getItem（'name'）；
}
}
//设置名称
函数集合名（e）{
如果（e.type==='keypress'）{
//确保已按enter键
if（e.which==13 | | e.keyCode==13）{
localStorage.setItem（'name'，e.target.innerText）；
name.blur（）；
}
}否则{
localStorage.setItem（'name'，e.target.innerText）；
}
}
//集中注意力
函数getFocus（）{
if（localStorage.getItem（'focus'）==null）{
focus.textContent='[输入焦点]'；
}否则{
focus.textContent=localStorage.getItem（'focus'）；
}
}
//聚焦
函数设置焦点（e）{
如果（e.type==='keypress'）{
//确保已按enter键
if（e.which==13 | | e.keyCode==13）{
setItem（'focus'，e.target.innerText）；
focus.blur（）；
}
}否则{
setItem（'focus'，e.target.innerText）；
}
}
name.addEventListener（'keypress'，setName）；
name.addEventListener（'blur'，setName）；
focus.addEventListener（'keypress'，setFocus）；
focus.addEventListener（'blur'，setFocus）；
//跑
showTime（）；
sebbgreet（）；
getName（）；
getFocus（）；
CSS
* {
框大小：边框框；
保证金：0；
填充：0；
}
身体{
字体系列：“流沙”，无衬线；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
高度：100vh；
颜色：黑色；
}
#时间{
字号：8rem；
}
h1{
边缘底部：3rem；
}
氢{
边缘底部：0.5雷姆；
不透明度：0.6；
}
@介质（最大宽度：700px）{
#时间{
字号：6rem；
}
}

以下是一个仅修改

setBgGreet

功能的解决方案：

// Set Background and Greeting
function setBgGreet() {
  let today = new Date(),
    hour = today.getHours();
  
  const now = today.getTime(); // this is the current time represented in milliseconds
  let nextChange; // this variable will tell when the next change of bg should occur

  if (hour < 12) {
    // Morning
    document.body.style.backgroundImage = "url('https://i.ibb.co/7vDLJFb/morning.jpg')";
    greeting.textContent = 'Good Morning, ';
    nextChange = today.setHours(12, 0, 0, 0); // Next change will be at 12 today
  } else if (hour < 18) {
    // Afternoon
    document.body.style.backgroundImage = "url('https://i.ibb.co/3mThcXc/afternoon.jpg')";
    greeting.textContent = 'Good Afternoon, ';
    nextChange = today.setHours(18, 0, 0, 0); // Next change will be at 18 today
  } else {
    // Evening
    document.body.style.backgroundImage = "url('https://i.ibb.co/924T2Wv/night.jpg')";
    greeting.textContent = 'Good Evening, ';
    document.body.style.color = 'white';
    nextChange = today.setHours(24, 0, 0, 0); // Next change will be at midnight, going to tomorrow
  }

  setTimeout(setBgGreet, nextChange - now); // This timeout will wait the correct amount of time
                                            // and then will trigger this very same function again
}

//设置背景和问候语
函数setbgreet（）{
让今天=新日期（），
小时=今天。getHours（）；
const now=today.getTime（）；//这是以毫秒表示的当前时间
let nextChange；//此变量将告诉下一次更改bg的时间
如果（小时<12）{
//早晨
document.body.style.backgroundImage=“url（'https://i.ibb.co/7vDLJFb/morning.jpg')";
greeting.textContent='早上好'；
nextChange=today.setHours（12,0,0,0）；//下一次更改将在今天12点进行
}否则，如果（小时<18）{
//下午
document.body.style.backgroundImage=“url（'https://i.ibb.co/3mThcXc/afternoon.jpg')";
greeting.textContent='下午好'；
nextChange=today.setHours（18,0,0,0）；//下一次更改将在今天18点进行
}否则{
//晚上
document.body.style.backgroundImage=“url（'https://i.ibb.co/924T2Wv/night.jpg')";
greeting.textContent='晚上好'；
document.body.style.color='white'；
nextChange=today.setHours（24,0,0,0）；//下一次更改将在午夜进行，直到明天
}
setTimeout（setBgGreet，nextChange-now）；//此超时将等待正确的时间量
//然后会再次触发这个相同的函数
}

如果此代码有效，您应该查看，看看您的问题是否与主题相关。事实上，“最佳实践”问题在这里几乎总是离题，因为它们需要征求意见。非常感谢。我感谢你的建议。