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 相关文章推荐
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
jquery分割字符串的方法
Jun 24 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 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实现快钱支付功能(涉及到接口)
2013/07/01 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
JavaScript的Cookies
2008/01/16 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python生成验证码图片代码分享
2016/01/28 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Python函数中的可变长参数详解
2019/09/12 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Python随机数函数代码实例解析
2020/02/09 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
简单了解如何封装自己的Python包
2020/07/08 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
监理资料员岗位职责
2014/01/03 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
综合管理员岗位职责
2015/02/11 职场文书
小学教师工作总结2015
2015/04/07 职场文书
建国大业观后感800字
2015/06/01 职场文书