> 웹 프론트엔드 > HTML 튜토리얼 > 前端笔记-随机使用背景_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-21 08:52:10
원래의
1374명이 탐색했습니다.

作者:赵策

发表时间:2016-4-5

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

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

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

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

  • testWeb
    • image
    • index.html

实现过程:

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

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

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

<!DOCTYPE html>&lthtml lang="en">&lthead>  &ltmeta charset="UTF-8">  &lttitle>Document</title></head>&ltbody></body></html>
로그인 후 복사

在 之间添加如下 js代码:

&ltscript 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('&ltstyle>.bg{width:100%;background:url(');  document.write(bodyBgs[randomBgIndex]);  document.write(');background-size: cover;}</style>');  //上面的三个字符串可以用“+”连接成一个字符串,这里因为位置原因我拆开写了。</script>
로그인 후 복사

在 <body>标签中使用class: bg

&ltbody class="bg">
로그인 후 복사

...这就完了?

完了!

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

简单分析一下执行过程:

  • 通过循环生成一组图片路径的字符串。
  • 通过产生随机数,随机得到某张图片的路径字符串。
  • 动态生成包含 css代码的 html代码。
  • 通过浏览器查看网页的显示情况。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿