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倒计时源码分享
May 16 Javascript
JS数组的常见用法实例
Feb 10 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
node.js实现登录注册页面
Apr 08 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
TypeScript类型声明书写详解
Aug 28 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
JS获取时间的方法
2015/01/21 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python实现UDP协议下的文件传输
2020/03/20 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
高中军训感言800字
2014/03/05 职场文书
二手房买卖协议书
2014/04/10 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
为自己工作观后感
2015/06/11 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
Python 绘制多因子柱状图
2022/05/11 Python