当前位置：Gxlcms > html代码 > 前端笔记-随机使用背景_html/css_WEB-ITnose

前端笔记-随机使用背景_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：16人阅读

作者：赵策

发表时间：2016-4-5

每次打开网站，总是熟悉的模样，看得久了就感觉丑！！！于是今天突发奇想，给网站做了一个随机使用背景。焕然一新，感觉果然是舒服多了。

可以实现随机使用背景的方法比较多，今天介绍一种相对容易理解的简单办法。

原理就是通过js代码来动态的生成一个代表图片路径的字符串或者 html代码

先看一下我的文件结构结构（testWeb即整个网站）

testWeb
- image
- index.html

实现过程：

首先在网上找一些喜欢的背景图片都放在image文件夹中.（分辨率别太小了，不是用来做头像的!:cat:）

其实直接用网上的图片链接也可以，只要能找到连接就行。

有了图片之后就可以做一个简单地 html网页，代码如下:


    
    <html lang="en"><head>  <meta charset="UTF-8">  <title>Document<body>
             
在  之间添加如下 js代码： 
    
    <script type="text/javascript">//产生随机背景图片  var bodyBgs = [];  for (var i = 1; i < 19; i++) {//注意图片数量    bodyBgs[i] = "image/bg"+i+".jpg";  };  var randomBgIndex = Math.round( Math.random() * 18 );//随机获取字符串标识，注意图片数量  document.write('<style>.bg{width:100%;background:url(');  document.write(bodyBgs[randomBgIndex]);  document.write(');background-size: cover;}');  //上面的三个字符串可以用“+”连接成一个字符串，这里因为位置原因我拆开写了。
             
在 <body>标签中使用class: bg 
    
    <body class="bg">
             
...这就完了？
     完了！
    
    保存文件，在浏览器中打开多刷新几次，没问题的话应该可以随机使用背景了，就这么简单。
    简单分析一下执行过程：
     
             通过循环生成一组图片路径的字符串。
     通过产生随机数，随机得到某张图片的路径字符串。
     动态生成包含 css代码的 html代码。 
     通过浏览器查看网页的显示情况。

前端笔记-随机使用背景_html/css_WEB-ITnose

作者：赵策

发表时间：2016-4-5

可以实现随机使用背景的方法比较多，今天介绍一种相对容易理解的简单办法。

先看一下我的文件结构结构（testWeb即整个网站）

实现过程：

...这就完了？

完了！

保存文件，在浏览器中打开多刷新几次，没问题的话应该可以随机使用背景了，就这么简单。

简单分析一下执行过程：

人气教程排行