js怎么获取给星期几配上图片

要在JavaScript中根据星期几动态显示相应的图片，可以使用Date对象来获取当前的星期几，然后通过DOM操作来改变页面上图片的src属性。 首先，通过Date对象获取当前星期几，然后定义一个对象或数组来存储星期几与图片路径的对应关系。最后，通过DOM操作将相应的图片路径赋值给图片元素的src属性。

一、获取当前星期几

JavaScript中的Date对象提供了多种方法来获取日期和时间信息，其中getDay()方法可以获取当前星期几。getDay()方法返回一个0到6的整数，分别对应星期日到星期六。

const today = new Date();
const dayOfWeek = today.getDay();  // 0 (Sunday) to 6 (Saturday)

二、定义星期几与图片路径的对应关系

可以使用一个对象或数组来存储星期几与图片路径的对应关系。这里使用一个对象来存储：

const dayImages = {
    0: 'images/sunday.jpg',
    1: 'images/monday.jpg',
    2: 'images/tuesday.jpg',
    3: 'images/wednesday.jpg',
    4: 'images/thursday.jpg',
    5: 'images/friday.jpg',
    6: 'images/saturday.jpg'
};

三、通过DOM操作设置图片的`src`属性

假设页面上有一个img元素，其id为dayImage，可以使用以下代码来动态设置图片的src属性：

const imageElement = document.getElementById('dayImage');
imageElement.src = dayImages[dayOfWeek];

四、完整代码示例

将以上步骤整合成一个完整的JavaScript代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekday Image Display</title>
</head>
<body>
    <img id="dayImage" alt="Day Image" />
    <script>
        // Step 1: Get the current day of the week
        const today = new Date();
        const dayOfWeek = today.getDay();  // 0 (Sunday) to 6 (Saturday)
        // Step 2: Define the images for each day
        const dayImages = {
            0: 'images/sunday.jpg',
            1: 'images/monday.jpg',
            2: 'images/tuesday.jpg',
            3: 'images/wednesday.jpg',
            4: 'images/thursday.jpg',
            5: 'images/friday.jpg',
            6: 'images/saturday.jpg'
        };
        // Step 3: Get the image element and set its src attribute
        const imageElement = document.getElementById('dayImage');
        imageElement.src = dayImages[dayOfWeek];
    </script>
</body>
</html>

五、使用CSS和JavaScript进一步优化

为了使页面更美观，可以使用CSS和JavaScript进一步优化。例如，可以在页面加载时添加一个过渡效果，使图片的切换更加平滑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weekday Image Display</title>
    <style>
        #dayImage {
            width: 100%;
            height: auto;
            transition: opacity 0.5s ease-in-out;
            opacity: 0;
        }
        #dayImage.loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <img id="dayImage" alt="Day Image" />
    <script>
        // Step 1: Get the current day of the week
        const today = new Date();
        const dayOfWeek = today.getDay();  // 0 (Sunday) to 6 (Saturday)
        // Step 2: Define the images for each day
        const dayImages = {
            0: 'images/sunday.jpg',
            1: 'images/monday.jpg',
            2: 'images/tuesday.jpg',
            3: 'images/wednesday.jpg',
            4: 'images/thursday.jpg',
            5: 'images/friday.jpg',
            6: 'images/saturday.jpg'
        };
        // Step 3: Get the image element and set its src attribute
        const imageElement = document.getElementById('dayImage');
        imageElement.src = dayImages[dayOfWeek];
        // Add a load event listener to add the 'loaded' class
        imageElement.addEventListener('load', function() {
            imageElement.classList.add('loaded');
        });
    </script>
</body>
</html>

通过上述方法，可以实现根据星期几动态显示不同图片的功能，并且添加了过渡效果，使图片切换更加平滑。