首页页面刷新，页面随机更换背景图片需求:当我们刷新页面，页面中的背景图片随机显示不同的图片分析: ①:随机函数 ②:css页面背景图片background-image ③:标签选择body,因为body是唯一的标签，可以直接写document.body.style

页面刷新，页面随机更换背景图片需求:当我们刷新页面，页面中的背景图片随机显示不同的图片分析: ①:随机函数 ②:css页面背景图片background-image ③:标签选择body,因为body是唯一的标签，可以直接写document.body.style

时间: 2024-12-30 20:39:06 浏览: 19

为了实现页面刷新时随机更换背景图片的需求，你可以结合以下几个步骤： 1. **创建随机函数**: 编写一个JavaScript函数，比如 `generateRandomImage()`, 它可以从预设的一组图片URL列表中随机选取一个。 ```javascript function generateRandomImage(imageArray) { const randomIndex = Math.floor(Math.random() * imageArray.length); return imageArray[randomIndex]; } ``` 2. **设置CSS背景图片**: 利用上述函数，动态地为`<body>`元素的`background-image`属性赋值。在HTML中添加一个隐藏的`<img>`标签来存储图片数据，并在JavaScript中引用它。 ```html <body style="background-image: url(loading.gif); /* 加载中图 */"> <img id="randomBackground" style="display: none;"> </body> ``` ```javascript const body = document.body; const backgroundImages = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片数组 // 获取图片数据 const imgElement = document.getElementById('randomBackground'); imgElement.src = backgroundImages[0]; // 设置初始背景图 // 页面刷新事件处理 window.onload = function () { body.style.backgroundImage = `url(${generateRandomImage(backgroundImages)})`; }; ``` 3. **处理加载动画**: 当图片还在加载过程中，可以显示一个占位图，如`loading.gif`，直到新的背景图片加载完成。每当用户刷新页面，`generateRandomImage()`就会被调用一次，从而更改背景图片。

阅读全文