js背景图片随机出现

在JavaScript中实现背景图片随机出现的功能，可以通过以下步骤来完成：

基础概念

JavaScript: 一种广泛用于客户端Web开发的脚本语言，可以用来操作HTML元素和CSS样式。
DOM (Document Object Model): HTML和XML文档的编程接口，JavaScript通过DOM来访问和操作网页元素。
随机数: 在一定范围内生成不重复的数值，用于选择不同的背景图片。

实现步骤

准备图片资源: 准备一组背景图片，并将它们放在项目的某个目录下。
编写JavaScript代码: 使用JavaScript来随机选择一张图片，并将其设置为页面的背景。

示例代码

假设你有以下几张背景图片存放在images/backgrounds目录下：

bg1.jpg
bg2.jpg
bg3.jpg
bg4.jpg

你可以使用以下JavaScript代码来实现随机背景图片的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Background</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <script>
        // 图片数组
        const images = [
            'images/backgrounds/bg1.jpg',
            'images/backgrounds/bg2.jpg',
            'images/backgrounds/bg3.jpg',
            'images/backgrounds/bg4.jpg'
        ];

        // 随机选择一张图片
        function getRandomImage() {
            const randomIndex = Math.floor(Math.random() * images.length);
            return images[randomIndex];
        }

        // 设置背景图片
        function setBackgroundImage() {
            const randomImage = getRandomImage();
            document.body.style.backgroundImage = `url(${randomImage})`;
        }

        // 页面加载完成后设置背景图片
        window.onload = setBackgroundImage;
    </script>
</body>
</html>