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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 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实现框架(一)
2006/10/09 PHP
PHP Google的translate API代码
2008/12/10 PHP
Yii学习总结之安装配置
2015/02/22 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
移动端脚本框架Hammer.js
2016/12/15 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
Golang与python线程详解及简单实例
2017/04/27 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
Python实现简单猜数字游戏
2021/02/03 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
Java基础面试题
2012/11/02 面试题
住宅质量保证书
2014/04/29 职场文书
考博专家推荐信
2014/05/10 职场文书
调任通知
2015/04/21 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS