如何将按时间、星期切换的图片设置为网页背景？

Got it, let's get your time/weekday-based images working as the page background! I'll walk you through adjusting your existing code and adding the necessary tweaks to make this happen.

Step 1: Fix & Complete Your Time/Weekday Logic #

First, let's finish the truncated code you shared. We'll keep using Moment.js to get Oslo's current day and hour, then map those values to specific background images.

Step 2: Set the Image as Page Background #

Instead of using document.write (which isn't ideal for this use case), we'll target the <body> (or <html>) element and set its background-image CSS property directly. We'll also add some CSS to ensure the background covers the entire page properly.

Here's the full working code:

<!DOCTYPE html>
<html>
<head>
    <script src="https://momentjs.com/downloads/moment.js"></script>
    <script src="https://momentjs.com/downloads/moment-timezone-with-data.js"></script>
    <style>
        /* Ensure background covers the whole page and scales correctly */
        body, html {
            height: 100%;
            margin: 0;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        // Get current day and hour in Oslo timezone
        const currentDay = moment().tz('Europe/Oslo').format('dddd');
        const currentHour = parseInt(moment().tz('Europe/Oslo').format('H'));
        
        // Define your image mappings (customize these paths to your images!)
        let backgroundImageUrl;
        
        // Example logic: adjust based on your needs
        if (currentDay === 'Monday') {
            // Different images for morning/afternoon/evening on Monday
            if (currentHour >= 6 && currentHour < 12) {
                backgroundImageUrl = 'monday-morning.jpg';
            } else if (currentHour >= 12 && currentHour < 18) {
                backgroundImageUrl = 'monday-afternoon.jpg';
            } else {
                backgroundImageUrl = 'monday-night.jpg';
            }
        } else if (currentDay === 'Tuesday') {
            // Repeat similar logic for other days
            backgroundImageUrl = 'tuesday-default.jpg';
        } else {
            // Fallback default image if no match
            backgroundImageUrl = 'default-background.jpg';
        }
        
        // Apply the background to the body
        document.body.style.backgroundImage = `url('${backgroundImageUrl}')`;
    </script>
</body>
</html>

Key Notes to Customize: #

• Image Paths: Replace the example image filenames (like monday-morning.jpg) with the actual URLs/paths to your images.
• Time/Day Logic: Adjust the if/else conditions to match exactly when you want each image to appear. You can add more granular time ranges or different images for each day as needed.
• Fallback Image: Always include a default image (the final else case) to cover any scenarios you don't explicitly define.

Why This Works: #

• The CSS ensures the background image stretches to cover the entire viewport, stays centered, and doesn't repeat.
• We use Moment.js to reliably get the current time in the Oslo timezone, so the image switching is accurate for that region.
• Setting backgroundImage directly on the body element is a clean way to apply the dynamic background without messy document.write calls.

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