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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
在Express中提供静态文件的实现方法
Oct 17 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php多文件上传实现代码
2014/02/20 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
python中list列表的高级函数
2016/05/17 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
四查四看剖析材料
2014/02/14 职场文书
父亲节活动策划方案
2014/08/24 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
代办出身证明书
2014/10/21 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
转让协议书
2015/01/27 职场文书
婚前保证书范文
2015/02/28 职场文书
python实现进度条的多种实现
2021/04/29 Python