这篇文章主要介绍了 js 鼠标点击图片实现随机变换图片的方法, 涉及鼠标事件与随机函数的使用技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: