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检测客户端不是firefox则提示下载
Apr 07 Javascript
use jscript List Installed Software
Jun 11 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
详解Vue的异步更新实现原理
Dec 22 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的栏目导航程序
2006/10/09 PHP
php5 mysql分页实例代码
2008/04/10 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
银行委托书范本
2014/09/28 职场文书
入党培养人考察意见
2015/06/08 职场文书
新闻稿格式范文
2015/07/18 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android