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_03_javascript全局观
Oct 11 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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 CKEditor 上传图片实现代码
2009/11/06 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
对javascript继承的理解
2016/10/11 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
安全资金保障制度
2014/01/23 职场文书
迎新晚会主持词
2014/03/24 职场文书
高中生班主任评语
2014/04/25 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
交通事故委托书范本
2014/09/28 职场文书
干部年终考核评语
2015/01/04 职场文书
2015年财务部工作总结
2015/04/10 职场文书
会计主管竞聘书
2015/09/15 职场文书
python实现三次密码验证的示例
2021/04/29 Python
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript