快捷導(dǎo)航

js鼠標(biāo)點(diǎn)擊圖片實(shí)現(xiàn)隨機(jī)變換圖片的方法

更新時(shí)間：2015年02月16日 09:53:38 作者：代碼家園

這篇文章主要介紹了js鼠標(biāo)點(diǎn)擊圖片實(shí)現(xiàn)隨機(jī)變換圖片的方法,涉及鼠標(biāo)事件與隨機(jī)函數(shù)的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了js鼠標(biāo)點(diǎn)擊圖片實(shí)現(xiàn)隨機(jī)變換圖片的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<html>
<title>鼠標(biāo)點(diǎn)擊圖片即可隨機(jī)變換圖片</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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)頁面跳轉(zhuǎn)鏈接的幾種方式匯總
這篇文章主要介紹了JS實(shí)現(xiàn)頁面跳轉(zhuǎn)鏈接的幾種方式,簡(jiǎn)單總結(jié)了幾種頁面跳轉(zhuǎn)功能的實(shí)現(xiàn),有使用js跳轉(zhuǎn)頁面,返回上一次預(yù)覽界面及button按鈕添加事件跳轉(zhuǎn),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2024-01-01
JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-08-08
JavaScript利用油猴腳本實(shí)現(xiàn)去水印功能
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用油猴腳本實(shí)現(xiàn)去水印功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-03-03
微信小程序?qū)崿F(xiàn)手勢(shì)解鎖的示例詳解
手勢(shì)解鎖是生活中常用的解鎖方式，本文將通過微信小程序?qū)崿F(xiàn)手勢(shì)解鎖這一功能，本實(shí)例以工具的形式可以嵌入到不同的項(xiàng)目之中，感興趣的可以了解一下
2022-04-04
基于JS實(shí)現(xiàn)視頻上傳顯示進(jìn)度條
這篇文章主要介紹了基于JS實(shí)現(xiàn)視頻上傳顯示進(jìn)度條,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-05-05
js對(duì)象基礎(chǔ)實(shí)例分析
這篇文章主要介紹了js對(duì)象基礎(chǔ),以實(shí)例形式分析了js對(duì)象的創(chuàng)建、讀取及遍歷等技巧,需要的朋友可以參考下
2015-01-01
微信小程序?qū)崿F(xiàn)滑動(dòng)驗(yàn)證拼圖
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)驗(yàn)證拼圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
javascript suggest效果自動(dòng)完成實(shí)現(xiàn)代碼分享
像百度與google，當(dāng)我們往搜索框輸入東西時(shí)就會(huì)出現(xiàn)一排列表提示用戶有什么熱門或適合的候選詞，這種效果就叫suggest。本文將一步步教你如何設(shè)計(jì)它
2012-02-02
TS中declare的簡(jiǎn)單使用方法
declare 關(guān)鍵字用來告訴編譯器,某個(gè)類型是存在的,可以在當(dāng)前文件中使用,本文給大家介紹TS中declare的簡(jiǎn)單使用方法,感興趣的朋友一起看看吧
2023-12-12
用js寫了一個(gè)類似php的print_r輸出換行功能
因?yàn)閜hp的print_r比較好用同時(shí)js卻沒有這個(gè)功能于是自己就寫了一個(gè)，感興趣的你可不要錯(cuò)過了哈，希望本文對(duì)你提高知識(shí)有所幫助
2013-02-02