js设置随机切换背景图片的简单实例


Posted in Javascript onNovember 12, 2017

实例如下:

<script>
 
var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default.png",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_3.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_1.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_4.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_5.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_6.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default-2.jpg",
       ];  
 
var index=Math.floor(Math.random()*8);
var img = imgs[index];
    function time(){
        
       document.body.style.backgroundImage="url("+img+")";
        
    }  
 
document.body.onload = function(){
 time();
}
</script>

以上这篇js设置随机切换背景图片的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 #Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 #Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 #Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 #Javascript
JS实现小球的弹性碰撞效果
Nov 11 #Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 #Javascript
You might like
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python和c语言的主要区别总结
2019/07/07 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
python学生管理系统的实现
2020/04/05 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
优秀的自荐信要注意哪些
2014/01/03 职场文书
2014年大学生工作总结
2014/11/20 职场文书
2015年试用期工作总结
2014/12/12 职场文书
期末个人总结范文
2015/02/13 职场文书
职工培训工作总结
2015/08/10 职场文书