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 相关文章推荐
推荐20家国外的脚本下载网站
Apr 28 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 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
实用函数10
2007/11/08 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
Python脚本实现自动发带图的微博
2016/04/27 Python
python3音乐播放器简单实现代码
2020/04/20 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python爬取内容存入Excel实例
2019/02/20 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
情侣吵架检讨书
2014/02/05 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
质量承诺书怎么写
2014/05/24 职场文书
党支部三会一课计划
2014/09/24 职场文书
工作自我推荐信范文
2015/03/25 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
八年级英语教学反思
2016/02/15 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
python中的装饰器该如何使用
2021/06/18 Python