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 相关文章推荐
javascript重写alert方法的实例代码
Mar 29 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
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中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
SVG描边动画
2017/02/23 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
实例详解Python模块decimal
2019/06/26 Python
python打开windows应用程序的实例
2019/06/28 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
经典c++面试题三
2015/07/08 面试题
软件测试有哪些?什么是配置项?
2012/02/12 面试题
素食餐饮项目创业计划书
2014/02/02 职场文书
知识竞赛主持词
2014/03/26 职场文书
大学新生入学教育方案
2014/05/16 职场文书
付款委托书范本
2014/10/05 职场文书
2014年底工作总结
2014/12/15 职场文书
中学教师个人总结
2015/02/10 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
python实现股票历史数据可视化分析案例
2021/06/10 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
tomcat下部署jenkins的方法
2022/05/06 Servers