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 可以拖动的DIV(二)
Jun 26 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
vue移动端使用canvas签名的实现
Jan 15 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中获取文件扩展名的N种方法小结
2012/02/27 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
js继承实现方法详解
2016/12/16 Javascript
EsLint入门学习教程
2017/02/17 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python协程之动态添加任务的方法
2019/02/19 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
中国医药集团国药在线:国药网
2017/02/06 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
幼儿园庆六一活动方案
2014/03/06 职场文书
任长霞观后感
2015/06/16 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL