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)容感興趣的讀者可查看本站專(zhuān)題：《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 正則表達(dá)式中g(shù)lobal模式的特性
這篇文章主要介紹了JavaScript 正則表達(dá)式中g(shù)lobal模式的特性 的相關(guān)資料,需要的朋友可以參考下2016-02-02
JavaScript DOM元素常見(jiàn)操作詳解【添加、刪除、修改等】
這篇文章主要介紹了JavaScript DOM元素常見(jiàn)操作,包括針對(duì)dom元素的添加、刪除、修改等相關(guān)操作實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2018-05-05
這篇文章主要介紹了微信小程序之判斷頁(yè)面滾動(dòng)方向的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序日期時(shí)間選擇器的使用方法，自定義精確到分秒或時(shí)段，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
hover效果，想必大家并不陌生吧，接下來(lái)為大家介紹下使用js模仿hover，感興趣的朋友可以參考下2013-12-12
2019 年編寫(xiě)現(xiàn)代 JavaScript 代碼的5個(gè)小技巧(小結(jié))
這篇文章主要介紹了2019 年編寫(xiě)現(xiàn)代 JavaScript 代碼的5個(gè)小技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
詳解JavaScript調(diào)用棧、尾遞歸和手動(dòng)優(yōu)化
本篇文章主要介紹了詳解JavaScript調(diào)用棧、尾遞歸和手動(dòng)優(yōu)化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了JS+DIV實(shí)現(xiàn)的卷簾效果,結(jié)合具體實(shí)例形式對(duì)比分析了javascript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性實(shí)現(xiàn)展開(kāi)與折疊效果的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
JS實(shí)現(xiàn)兩表格里數(shù)據(jù)來(lái)回轉(zhuǎn)移的方法
這篇文章主要介紹了JS實(shí)現(xiàn)兩表格里數(shù)據(jù)來(lái)回轉(zhuǎn)移的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
OkHttp踩坑隨筆為何 response.body().string() 只能調(diào)用一次
想必大家都用過(guò)或接觸過(guò) OkHttp，我最近在使用 Okhttp 時(shí)，就踩到一個(gè)坑，在這兒分享出來(lái)，以后大家遇到類(lèi)似問(wèn)題時(shí)就可以繞過(guò)去2018-01-01