如何根据用户时间自动切换网页背景与导航栏颜色？

Great question! Let's break this down clearly for you:

First up: Can this be done with CSS only? #

Short answer: No. CSS doesn't have any built-in way to access the user's local system time, so you can't trigger style changes based on time purely with CSS. You'll need a bit of JavaScript to pull off the time-based theme switch, but it's straightforward to implement with your existing Bootstrap setup.

Here's how to implement it with JavaScript + CSS #

I'll tie this directly into your existing code so you can drop it in easily:

1. Update Your CSS (Add Theme Styles) #

Add these theme-specific styles to your existing CSS file. I've kept your original styles intact and added the day/night variations:

/* Day Theme (Blue tones) */
body.day-theme {
  background-color: #e6f2ff; /* Soft light blue background */
}
body.day-theme nav {
  background-color: #0066cc; /* Deep blue navbar */
}
body.day-theme .nav a.active {
  color: #003366; /* Darker blue for active nav links */
}

/* Night Theme (Dark red tones) */
body.night-theme {
  background-color: #2d0e0e; /* Dark reddish background */
}
body.night-theme nav {
  background-color: #800000; /* Dark red navbar */
}
body.night-theme .nav a.active {
  color: #ffcccc; /* Light pinkish-red for active nav links */
}

/* Your Original CSS (Fixed the `position: top` typo to `top: 0`) */
nav h1 { 
  vertical-align: middle; 
  border: 10px solid rgba(0, 0, 0, 0); 
  text-align: center; 
  position: fixed; 
  top: 0;
  min-width: 100%; 
  z-index: 3; 
} 
.nav ul { 
  vertical-align: middle; 
  -webkit-font-smoothing:antialiased; 
  text-shadow:0 1px 0 rgba(255, 255, 255, 0); 
  background: inherit; /* Inherit navbar color from theme */
  list-style: none; 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  z-index: 3; 
} 
.card-img-wrap img { 
  transition: transform .25s; 
  width: 100%; 
} 
.card-img-wrap:hover img { 
  transform: scale(1.2); 
} 
.card-img-wrap:hover:after { 
  opacity: 1; 
}

2. Add the JavaScript Logic #

Paste this script at the bottom of your HTML (right after the Bootstrap JS script) to detect the time and apply the correct theme:

// Get current local hour (0-23)
const currentHour = new Date().getHours();
const body = document.body;

// Define time ranges: 6AM to 6PM is day, rest is night
if (currentHour >= 6 && currentHour < 18) {
  body.classList.add('day-theme');
} else {
  body.classList.add('night-theme');
}

// Optional: Mark the first nav link as active (adjust this to your default active item)
document.querySelector('.nav li:first-child a').classList.add('active');

3. Optional: Auto-Update Theme Mid-Session #

If you want the theme to switch automatically if the user stays on the page past 6AM/6PM, add this extra script:

// Calculate milliseconds until the next theme switch
function getNextSwitchTime() {
  const now = new Date();
  let nextHour;
  
  if (now.getHours() < 6) nextHour = 6;
  else if (now.getHours() < 18) nextHour = 18;
  else nextHour = 6 + 24; // Next day's 6AM
  
  const nextSwitch = new Date(now.getFullYear(), now.getMonth(), now.getDate(), nextHour);
  return nextSwitch.getTime() - now.getTime();
}

// Set up a repeating timer to switch themes when needed
function scheduleThemeSwitch() {
  setTimeout(() => {
    // Remove old theme classes
    body.classList.remove('day-theme', 'night-theme');
    // Apply new theme based on updated time
    const newHour = new Date().getHours();
    body.classList.add(newHour >=6 && newHour <18 ? 'day-theme' : 'night-theme');
    // Reschedule the next switch
    scheduleThemeSwitch();
  }, getNextSwitchTime());
}

// Start the auto-update timer
scheduleThemeSwitch();

Quick Notes #

• You can tweak the time ranges (e.g., make day run 7AM-7PM) by adjusting the hour values in the JavaScript.
• Feel free to modify the color hex codes to match your exact desired blue/red tones.
• The active class on nav links makes it easy to style the selected menu item differently per theme.

内容的提问来源于stack exchange，提问作者Jeeva Bharathi