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 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
window.location和document.location的区别分析
Dec 23 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 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使用cookie实现记住登录状态
2015/04/27 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
javascript中Function类型详解
2015/04/28 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
python数据结构之链表的实例讲解
2017/07/25 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python 获取url中的参数列表实例
2018/12/18 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python lxml中etree的简单应用
2019/05/10 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
国际会议邀请函范文
2014/01/16 职场文书
安全口号大全
2014/06/21 职场文书
音乐幼师求职信
2014/07/09 职场文书
领导干部对照检查材料
2014/08/24 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
go语言中fallthrough的用法说明
2021/05/06 Golang
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电