Heim >Web-Frontend >HTML-Tutorial >前端笔记-随机使用背景_html/css_WEB-ITnose
前端笔记-随机使用背景_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:52:101355Durchsuche
作者：赵策
发表时间：2016-4-5
每次打开网站，总是熟悉的模样，看得久了就感觉 丑！！！于是今天突发奇想，给网站做了一个随机使用背景。焕然一新，感觉果然是舒服多了。
可以实现随机使用背景的方法比较多，今天介绍一种相对容易理解的简单办法。
原理就是通过js代码来动态的生成一个代表图片路径的 字符串或者 html代码
先看一下我的文件结构结构（testWeb即整个网站）
- testWeb
- image
- index.html
实现过程：
首先在网上找一些喜欢的背景图片都放在image文件夹中.（分辨率别太小了，不是用来做头像的!:cat:）
其实直接用网上的图片链接也可以，只要能找到连接就行。
有了图片之后就可以做一个简单地 html网页，代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>
在
之间添加如下 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;}</style>'); //上面的三个字符串可以用“+”连接成一个字符串，这里因为位置原因我拆开写了。</script>
在 <body>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Python脚本检测网站链接是否存在_html/css_WEB-ITnoseNächster Artikel：异常中的异常：借助系统异常处理特例实现匪夷所思的漏洞利用_html/css_WEB-ITnose