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查看html源文件
Nov 08 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
js实现文字选中分享功能
Jan 25 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
VUE重点问题总结
Mar 19 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
js数组的基本使用总结
Jan 18 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
orm获取关联表里的属性值
2016/04/17 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
扩展String功能方法
2006/09/22 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
python3序列化与反序列化用法实例
2015/05/26 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
用Python解决计数原理问题的方法
2016/08/04 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python代码实现KNN算法
2017/12/20 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
运动会报道稿300字
2014/10/02 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
小班下学期个人总结
2015/02/12 职场文书
旗帜观后感
2015/06/08 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技