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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
javascript制作2048游戏
Mar 30 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
简单的渐变轮播插件
Jan 12 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
AJAX学习笔记
May 18 Javascript
用JS创建一个录屏功能
Nov 11 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在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
php中如何执行linux命令详解
2018/11/06 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
JavaScript面象对象设计
2008/04/28 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
用Python写王者荣耀刷金币脚本
2017/12/21 Python
Python中交换两个元素的实现方法
2018/06/29 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python__name__原理及用法详解
2019/11/02 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
临床医学系毕业生推荐信
2013/11/09 职场文书
打架检讨书300字
2014/02/02 职场文书
招商专员岗位职责
2014/02/08 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
Fluentd搭建日志收集服务
2022/09/23 Servers