静态HTML页面通过JavaScript实现加载时随机切换背景图片求助

你当前的代码存在两类问题，按以下方案修复即可正常运行： #

已知问题 #

1. 语法错误：choosePic 函数缺少闭合的右花括号 }，语法不合法会导致JS直接停止执行，无任何效果。
2. 逻辑不匹配需求：当前代码逻辑是修改ID为myPicture的<img>元素的图片地址，并非修改页面背景图片，和你要实现的功能不符。

修复方案 #

方案1：仅修复修改img元素图片的逻辑 #

如果你的需求是修改页面内指定图片元素的内容，使用以下修复后的代码：

window.onload = choosePic;

var myPix = ["images/lion.jpg","images/tiger.jpg","images/bear.jpg"];

function choosePic() {
     var randomNum = Math.floor(Math.random() * myPix.length);
     document.getElementById("myPicture").src = myPix[randomNum];
}

额外确认项：

• 你的HTML文件中存在对应元素：<img id="myPicture" alt="随机图">
• 图片路径为相对于HTML文件的正确路径，可打开浏览器F12控制台查看是否有图片加载404报错。

方案2：实现页面加载自动更换页面背景图 #

如果你的需求是修改整个页面的背景图，使用以下代码：

window.onload = choosePic;

var myPix = ["images/lion.jpg","images/tiger.jpg","images/bear.jpg"];

function choosePic() {
     var randomNum = Math.floor(Math.random() * myPix.length);
     // 修改body的背景图属性
     document.body.style.backgroundImage = `url(${myPix[randomNum]})`;
     // 背景填充配置，可按需调整或删除
     document.body.style.backgroundSize = "cover";
     document.body.style.backgroundRepeat = "no-repeat";
     document.body.style.backgroundPosition = "center";
     document.body.style.minHeight = "100vh";
}

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