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中的startWith和endWith的几种实现方法
May 07 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 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中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
python中List的sort方法指南
2014/09/01 Python
pytorch之添加BN的实现
2020/01/06 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
Pycharm安装python库的方法
2020/11/24 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
班长岗位职责
2013/11/10 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
小组合作学习反思
2014/02/18 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
本科毕业生自荐信
2014/06/02 职场文书
服装设计师求职信
2014/06/04 职场文书
党性观念心得体会
2014/09/03 职场文书
党建工作汇报材料
2014/12/24 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
nginx配置限速限流基于内置模块
2022/05/02 Servers