JS实现页面载入时随机显示图片效果


Posted in Javascript onSeptember 07, 2016

本文实例讲述了JS实现页面载入时随机显示图片效果。分享给大家供大家参考,具体如下:

<html>
<head>
<title>JS 随机图片效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
img { border: #999999; border-style: dotted; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</style>
</head>
<SCRIPT LANGUAGE="JavaScript">
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "img/a1.jpg";
images[2] = new Image();
images[2].src = "img/a2.jpg";
images[3] = new Image();
images[3].src = "img/a3.jpg";
images[4] = new Image();
images[4].src = "img/a4.jpg";
function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
</script>
<body bgcolor="#FFFFFF" text="#000000" OnLoad="swapPic()">
<img name="randimg" src="img/a1.jpg">
</body>
</html>

代码经测试可以正常运行。这里就不再配上运行效果图了,感兴趣的朋友可以挑几张美女图片测试一下看看效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
jquery创建div 实现代码
Apr 27 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
jquery实现用户打分评分特效
May 28 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
JS简单实现浮动窗口效果示例
Sep 07 #Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 #Javascript
Vue.js快速入门教程
Sep 07 #Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 #Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 #Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 #Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 #Javascript
You might like
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
python编程开发之日期操作实例分析
2015/11/13 Python
Python循环语句中else的用法总结
2016/09/11 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python计算日期之间的放假日期
2018/06/05 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
python Kmeans算法原理深入解析
2019/08/23 Python
Python: 传递列表副本方式
2019/12/19 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Python datetime模块使用方法小结
2020/06/18 Python
一套Delphi的笔试题一
2016/02/14 面试题
文科教师毕业的自我评价
2014/01/16 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
中国合伙人观后感
2015/06/02 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL
关于MySQL中explain工具的使用
2023/05/08 MySQL