js实现网页随机切换背景图片的方法

 更新时间:2014年11月01日 09:26:24   转载 投稿:shichen2014  
这篇文章主要介绍了js实现网页随机切换背景图片的方法,涉及数组、随机函数与css样式的调用技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现网页随机切换背景图片的方法。分享给大家供大家参考。具体实现方法如下:

首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量

在script中将这些图像编为一个数组,便于调用。数组的长度当然就是图像的数量。

复制代码 代码如下:
var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";

因为上面用到了5个图像,所以在这里需要产生一个0到4的随机数。如果数组长度不一样,修改下面代码中的乘数就可以。

复制代码 代码如下:
var randomBgIndex = Math.round( Math.random() * 4 );

核心的程序就是这些。尽管很简单,却是一种小小的思路,若以此为基础,通过加工可以做出一些扩展功能。比如:主题切换以及其它的随机呈现等等。下面是完整的JS代码。

复制代码 代码如下:
<script type="text/javascript">
    //<!CDATA[
        var bodyBgs = [];
        bodyBgs[0] = "images/01.jpg";
        bodyBgs[1] = "images/02.jpg";
        bodyBgs[2] = "images/03.jpg";
        bodyBgs[3] = "images/04.jpg";
        bodyBgs[4] = "images/05.jpg";
        var randomBgIndex = Math.round( Math.random() * 4 );
    //输出随机的背景图
        document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0}</style>');
    //]]>
</script>

希望本文所述对大家基于javascript的web程序设计有所帮助。

相关文章

  • JS利用prototype给类添加方法操作详解

    JS利用prototype给类添加方法操作详解

    这篇文章主要介绍了JS利用prototype给类添加方法操作,结合实例形式分析了javascript使用prototype实现给类添加方法的相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • 理解Javascript_12_执行模型浅析

    理解Javascript_12_执行模型浅析

    大家有没有想过,一段javascript脚本从载入浏览器到显示执行都经过了哪些流程,其执行次序又是如何。本篇博文将引出'javascript执行模型'的概念,并带领大家理解javascript在执行时的处理机制。
    2010-10-10
  • layui实现checkbox的目录树tree的例子

    layui实现checkbox的目录树tree的例子

    今天小编就为大家分享一篇layui实现checkbox的目录树tree的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript中的this引用(推荐)

    JavaScript中的this引用(推荐)

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化。这篇文章主要介绍了JavaScript中的this引用的相关资料,非常不错,需要的朋友可以参考下
    2016-08-08
  • 浅谈TypeScript 用 Webpack/ts-node 运行的配置记录

    浅谈TypeScript 用 Webpack/ts-node 运行的配置记录

    这篇文章主要介绍了浅谈TypeScript 用 Webpack/ts-node 运行的配置记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • JavaScript脚本性能的优化方法

    JavaScript脚本性能的优化方法

    JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能。
    2007-02-02
  • JavaScript正则获取地址栏中参数的方法

    JavaScript正则获取地址栏中参数的方法

    这篇文章主要介绍了JavaScript正则获取地址栏中参数的方法,涉及javascript基于正则的字符串截取操作相关实现技巧,需要的朋友可以参考下
    2017-03-03
  • 关于Blog顶部的滚动导航条代码

    关于Blog顶部的滚动导航条代码

    关于Blog顶部的滚动导航条代码...
    2006-09-09
  • 深入学习JavaScript对象

    深入学习JavaScript对象

    今天小编就和大家深入学习JavaScript对象,感兴趣的小伙伴们可以参考一下,大家一起学习。
    2015-10-10
  • JavaScript 深层克隆对象详解及实例

    JavaScript 深层克隆对象详解及实例

    这篇文章主要介绍了 JavaScript 深层克隆对象的相关资料,并附实例代码,帮助大家学习参考这部分知识,需要的朋友可以参考下
    2016-11-11

最新评论