为了账号安全,请及时绑定邮箱和手机立即绑定

HTML中的随机图像背景

HTML中的随机图像背景

隔江千里 2021-11-04 15:14:58
我想要一个完整的背景,每次页面刷新时随机改变。我的页面是带有 CSS 和 JS(包括 JQuery)的 HTML。我已经从这个网站和许多其他网站尝试了很多解决方案,我知道他们有很多教程。但我认为我做错了什么,因为没有任何功能。   <!DOCTYPE html>   <html>     <head>       <meta charset="UTF-8">       <meta http-equiv="X-UA-Compatible" content="IE=edge">       <meta name="viewport" content="width=device-width, initial-scale=1">       <title>index</title>       <script src="js/jquery-3.3.1.min.js"></script>       <script src="js/popper.min.js"></script>        <script src="js/bootstrap-4.3.1.js"></script>       <!-- Bootstrap -->       <link href="css/bootstrap-4.3.1.css" rel="stylesheet">       <style type="text/css">       body {    background: url(images/BG/bg01.jpg) no-repeat center center fixed;      -webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover;     background-size: cover;   }       a:link {       color: #000000;   }   a:hover {       color: #000000;   }       </style>我在名为 bg01.jpg bg02.jpg bg03.jpg 的同一个文件夹中有 13 个背景......我不明白如何在我拥有的 css 部分替换我的 url,在那里添加 JS 等...... Noobie 主题,我很抱歉,但我没有找到为我工作的导师
查看完整描述

1 回答

?
哈士奇WWW

TA贡献1799条经验 获得超6个赞

为此,您可以使用纯 JavaScript。只需生成一个随机数并设置背景即可。


function randomBackground(){

    var num = Math.floor(Math.random() * 13) + 1; // will generate a random number between 0 and 12

    if(num.toString().length == 1) num = "0" + num;

    document.body.style.background = "url('images/BG/bg"+num+".jpg')"; // for images: bg01.jpg, bg02.jpg, bg03.jpg, ... bg13.jpg

    document.body.style.backgroundPosition = "center";

    document.body.style.backgroundRepeat = "no-repeat";

    document.body.style.backgroundSize = "cover";

}


查看完整回答
反对 回复 2021-11-04
  • 1 回答
  • 0 关注
  • 306 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信