js鼠标点击图片实现随机变换图片的方法


Posted in Javascript onFebruary 16, 2015

本文实例讲述了js鼠标点击图片实现随机变换图片的方法。分享给大家供大家参考。具体实现方法如下:

<html>
<title>鼠标点击图片即可随机变换图片</title>
<body bgcolor="#fef4d9" OnLoad="swapPic()">
<center>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "images/m01.jpg";
images[2] = new Image();
images[2].src = "images/m02.jpg";
images[3] = new Image();
images[3].src = "images/m03.jpg";
images[4] = new Image();
images[4].src = "images/m04.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;
}
// End -->
</script>
<a onClick="swapPic();">
<img name="randimg" src="images/m09.jpg">
</a>
<br>
<font face="Verdana" size="-2">click image to change
</center>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
JavaScript事件委托实例分析
May 26 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
JavaScript简介
Feb 15 #Javascript
JavaScript的原型继承详解
Feb 15 #Javascript
javascript 闭包详解
Feb 15 #Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 #Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 #Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 #Javascript
浅谈javascript中this在事件中的应用
Feb 15 #Javascript
You might like
用php来检测proxy
2006/10/09 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
vue prop传值类型检验方式
2020/07/30 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
python实现视频分帧效果
2019/05/31 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
模范家庭事迹材料
2014/02/10 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python