需求:每次刷新页面,随机获取背景图

实现方式:

1 通过js动态生成标签

<body>

    <script type="text/javascript">

	var bodyBgs = [];

	bodyBgs[0] = "/cas/img/login/bg/load1.jpg";

	bodyBgs[1] = "/cas/img/login/bg/load2.jpg";

	var randomBgIndex = Math.round( Math.random() * 1 );

	document.write('<div class="col-left" style="background: url(' + bodyBgs[randomBgIndex] + ') no-repeat"></div>');

    </script>

</body>

　　缺点:虽然可以满足功能要求,但是在body中插入js,无论从代码简洁性还是用户体验都不太好;

2 jquery替换参数

根据标签的不同,有两种方式可以实现功能:

  • div标签,通过css定义背景图参数

　　页面标签:

　　<div id="imgload" class="col-left"></div>　　

　　jquery实现:

　　$().ready(function(){

    　　var myPix = new Array("/cas/img/login/bg/load1.jpg","/cas/img/login/bg/load2.jpg");

   　　 var randomNum=Math.floor(Math.random()*myPix.length);

   　　 $("#imgload").css('background', 'url('+myPix[randomNum]+') no-repeat');

　　};
  • 通过attr(),替换src参数

　　页面标签:

　　<img id="imgload">

　　jquery实现:

　　$().ready(function() {

 　　   ar myPix = new Array("/cas/img/login/bg/load1.jpg","/cas/img/login/bg/load2.jpg");

  　　  var randomNum=Math.floor(Math.random()*myPix.length);

   　　 $("#imgload").attr('src', myPix[randomNum]);

　　});

jquery参数替换方式较好一些,js代码可以整体维护,页面也比较简洁;

html 刷新更新背景图的更多相关文章

  1. JS实现背景图按时切换或者每次更新

    首先要有一个添加背景图片的div <div  id="myDiv"></div> css样式中添加背景tu图 body{height:100%;} #myD ...

  2. js实现刷新页面出现随机背景图

    直接上代码: <script>         var bodyBgs = [];         bodyBgs[0] = "IMG/01.jpg";         ...

  3. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  4. 为Visual Studio更换皮肤和背景图

    最近在博客上别人在老早之前就有加了背景图,想想怎么能这么out,于是乎,百度一下,能否知道? 咳咳,资源还是有滴!可惜都是比较旧的跟新版本的配置方法可能有点不一样, 可能会有很多人会觉得不适应,不过没 ...

  5. 给Visual Studio更替皮肤和背景图

    给Visual Studio更换皮肤和背景图 1.先安装更换皮肤的插件  VS菜单栏里面找到:工具>扩展和更新>联机>搜索: Theme Editor   下载并安装: 安装后先不着 ...

  6. 清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  7. Visual Studio 2017 设置透明背景图

    一.前言 给大家分享一下,如何为VS2017设置透明背景图.下面是一张设置前和设置后的图片. 设置前: 设置后: 二.设置背景图片的扩展程序 我们打开VS的扩展安装界面:[工具]->[扩展和更新 ...

  8. JS判断图片是否加载完成 背景图404 快到碗里来

    面对这个问题 我最多做到表面笑嘻嘻 …… 真不知道测试怎么那么…… 啥都能给你测出来 有的没的都能给你测出来 算了算了  谁让本仙女本精灵本可爱温柔大方善解人意呢 …呵呵呵 ————————————正 ...

  9. 【Web前端】清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

随机推荐

  1. C#获取Excel表格所有sheet名(Epplus)

    原文:C#获取Excel表格所有sheet名(Epplus) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog. ...

  2. 手机如何修改host文件

    常常在想本地开发的时候使用pc端测试移动端,由于有安全域名限制,因此在本地修改了机器的host.将域名映射到本地局域网.这个做法是很正常的也很常见.但是现在新的需求是我需要在手机上也能够正常测试啊!怎 ...

  3. 使用vue国际化中出现内置的组件无法切换语言的问题(element-ui、ivew)

    在main.js中引入对应组件的语言包 eg: import VueI18n from 'vue-i18n'; // 引入国际化 import elementEn from 'element-ui/l ...

  4. js入门第二篇之流程控制语句

    表达式语句: 一个表达式可以产生一个值,有可能是运算.函数调用 字面量 表达式可以放在任何需要值的地方. 语句: 语句可以理解成一个行为,循环语句和判断语句就是典型的语句,一个程序有多个语句组成. 流 ...

  5. S2-019、S2-020

    前言 “Struts2系列起始篇”是我整各系列的核心,希望大家能花些时间先看看. 正文 我发现关于一些早期的Struts2的漏洞,网上的分析文章并不多,不知道是不是我打开浏览器的方式不对,唯一看到的两 ...

  6. Java基础加强-代理

    /*代理*//*代理的概念与作用*/ 代理过程架构 客户端Client原来直接调用的是Target目标类 使用代理后,现在让客户端不要调用Target,调用代理类Proxy,代理类Proxy和目标类T ...

  7. oracle排序怎样弄成1 2 3 ，而不是 1 10 100

    oracle表字段设置得值不是number,而是Varchar2时排序就会出现这种问题 这个时候排序的时候需要转类型排序: order by to_number(顺序号) asc

  8. sqlserver 拼接字符串

    SELECT CAST(USER_ID AS VARCHAR) + ',' FROM dbo.AUTH_USER FOR XML PATH('');

  9. SQL Server CET 通用表表达式 之 精典递归

    SQL2005 Common Table Expressions(CET)即通用表表达式. SQLSERVER CET递归使用案例: 1.普通案例 表结构如下:   ;WITH cet_depart ...

  10. slice()， splice()，split()，indexOf()，join()，replace()

    1.slice() slice() 方法可以接受一或两个参数,即要返回项的起始和结束位置. 在只有一个参数的情况下, slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项. 如果有两个参 ...