JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)圖片并統(tǒng)計(jì)點(diǎn)擊次數(shù)功能示例
本文實(shí)例講述了JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)圖片并統(tǒng)計(jì)點(diǎn)擊次數(shù)功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>點(diǎn)擊出現(xiàn)圖片，再次點(diǎn)擊循環(huán)出現(xiàn)</title>
</head>
<body>
<script type="text/javascript" defer="defer">
var img=document.getElementById('img');
var counts=0;
function onButton() {
counts++;
if (counts%2== 0) {
document.getElementById("img").style = "display:none";
} else {
document.getElementById("img").style = "display:block";
}
}
function showClick() {
alert(counts);
}
</script>
<input type="button" value="請(qǐng)單擊" onclick="onButton()" style="width: 100px; height: 20px;color: blue; background-color: chartreuse" >
<input type="button" value="顯示單擊次數(shù)" onclick="showClick()" style="width: 100px; height: 20px;color: blue; background-color: chartreuse" >
<div id="img" style="display:none"><img src="http://tools.jb51.net/static/api/pintu/images/4/main.jpg"></div>
</body>
</html>
注：小編針對(duì)代碼的統(tǒng)計(jì)顯示功能稍作修改，同時(shí)加入了一張美女同事的照片做測(cè)試，使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun，獲得如下測(cè)試效果：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
用javascript實(shí)現(xiàn)檢測(cè)指定目錄是否存在的方法
今天看到一篇關(guān)于onegreen被掛馬的代碼發(fā)現(xiàn)這個(gè)函數(shù)，它用js就可以檢測(cè)，制定的目錄或指定的文件是否存在，一般用來(lái)讀chm文件中的圖片來(lái)檢測(cè)，目錄的存在。高手就是不學(xué)好。2008-01-01
各種頁(yè)面定時(shí)跳轉(zhuǎn)(倒計(jì)時(shí)跳轉(zhuǎn))代碼總結(jié)
下面對(duì)實(shí)現(xiàn)頁(yè)面定時(shí)跳轉(zhuǎn)（也稱倒計(jì)時(shí)跳轉(zhuǎn)）做一下總結(jié)，以備不時(shí)之需，經(jīng)常使用的朋友可以參考下2013-10-10
uniapp?動(dòng)態(tài)組件實(shí)現(xiàn)Tabs標(biāo)簽切換組件(喜馬拉雅app作為案例)
本文以喜馬拉雅app作為案例給大家詳解講解uniapp?動(dòng)態(tài)組件實(shí)現(xiàn)Tabs標(biāo)簽切換組件功能,在uniapp中實(shí)現(xiàn)動(dòng)態(tài)組件切換需看uniapp是否支持,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
javascript+html5+css3自定義彈出窗口效果
這篇文章主要為大家詳細(xì)介紹了javascript+html5+css3自定義彈出窗口效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了javascript面向?qū)ο筇匦源a實(shí)例,包括類、靜態(tài)成員、對(duì)象、重載,需要的朋友可以參考下2014-06-06
利用Math.js解決JS計(jì)算小數(shù)精度丟失問(wèn)題
電商系統(tǒng)中訂單、庫(kù)存中有數(shù)字等加減乘除算術(shù),下面這篇文章主要給大家介紹了關(guān)于利用Math.js解決JS計(jì)算小數(shù)精度丟失問(wèn)題的相關(guān)資料,mathjs是一個(gè)前端在計(jì)算上面必定會(huì)用到的類庫(kù),需要的朋友可以參考下2022-04-04
使用戶點(diǎn)擊后退按鈕使效三行代碼...2007-07-07
從js向Action傳中文參數(shù)出現(xiàn)亂碼問(wèn)題的解決方法
Action獲取jsp表單中的中文參數(shù)，只要整個(gè)項(xiàng)目都采用UTF-8編碼格式都不會(huì)出現(xiàn)亂碼問(wèn)題；但JSP中用到JS,并從JS向Action傳中文參數(shù)，就會(huì)出現(xiàn)中文亂的現(xiàn)象2013-12-12
本篇文章通過(guò)仿照淘寶搜索關(guān)鍵字后下拉相關(guān)產(chǎn)品搜索樣子的制作，深度分析了JSsearch的用法，一起跟著小編學(xué)習(xí)下吧。2018-01-01
這篇文章主要給大家深入的介紹了JavaScript中的for循環(huán)，其中包括ES5中的三種for循環(huán)，分別是簡(jiǎn)單for循環(huán)、for-in以及forEach，另外還詳細(xì)介紹了ES6新增的一種循環(huán)：for-of ，有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02