JS控制随机更换页面背景图片

作品 · 2016-07-30

由于某私人原因,博主期待这个功能许久了,然后从网上搜罗的方法竟无一成功,当然这并不否定网络上的方法,毕竟博主刚刚接触js,撰写与使用都不是很明白。
今天通过博主对js脚本的基本研究和对网络上各种资源的学习,得出了实际可行的办法,但不保证代码的简洁与标准化等。

法一
<body id="ddd">
<script>
var r= parseInt(8*Math.random());
document.getElementById("ddd").style='width:360px;margin:0 auto;background-image:url( R' + r + ');';
</script>
</body>

我给body赋予了id:ddd,然后下面加载一个js。js随机生成一个8以内的非负整数,再检查其值。若此值为1,则上面body新增style属性,使得背景图片变成R1,以此类推。使用条件就是把备选图片重命名为R0~R8。

法二
<body id="ddd" style="width:360px;margin:0 auto;";>
<script type="text/javascript">
var r=  parseInt(8*Math.random());
document.getElementById('ddd').background='R'+r+'';
</script>
</body>

原理同上,但是此中涉及到body标签中的backgroung属性,而这在W3C中是不被推荐的。