JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)圖片并統(tǒng)計(jì)點(diǎn)擊次數(shù)功能示例

更新時(shí)間：2018年07月23日 10:57:31 作者：金含

這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊出現(xiàn)圖片并統(tǒng)計(jì)點(diǎn)擊次數(shù)功能,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(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="請單擊" 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>

注：小編針對代碼的統(tǒng)計(jì)顯示功能稍作修改，同時(shí)加入了一張美女同事的照片做測試，使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun，獲得如下測試效果：

更多關(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é)》

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

您可能感興趣的文章:

js 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的示例代碼

相關(guān)文章

用javascript實(shí)現(xiàn)檢測指定目錄是否存在的方法
今天看到一篇關(guān)于onegreen被掛馬的代碼發(fā)現(xiàn)這個(gè)函數(shù)，它用js就可以檢測，制定的目錄或指定的文件是否存在，一般用來讀chm文件中的圖片來檢測，目錄的存在。高手就是不學(xué)好。
2008-01-01
各種頁面定時(shí)跳轉(zhuǎn)(倒計(jì)時(shí)跳轉(zhuǎn))代碼總結(jié)
下面對實(shí)現(xiàn)頁面定時(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是否支持,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-10-10
javascript+html5+css3自定義彈出窗口效果
這篇文章主要為大家詳細(xì)介紹了javascript+html5+css3自定義彈出窗口效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
javascript面向?qū)ο筇匦源a實(shí)例
這篇文章主要介紹了javascript面向?qū)ο筇匦源a實(shí)例,包括類、靜態(tài)成員、對象、重載,需要的朋友可以參考下
2014-06-06
利用Math.js解決JS計(jì)算小數(shù)精度丟失問題
電商系統(tǒng)中訂單、庫存中有數(shù)字等加減乘除算術(shù),下面這篇文章主要給大家介紹了關(guān)于利用Math.js解決JS計(jì)算小數(shù)精度丟失問題的相關(guān)資料,mathjs是一個(gè)前端在計(jì)算上面必定會用到的類庫,需要的朋友可以參考下
2022-04-04
使用戶點(diǎn)擊后退按鈕使效三行代碼
使用戶點(diǎn)擊后退按鈕使效三行代碼...
2007-07-07
從js向Action傳中文參數(shù)出現(xiàn)亂碼問題的解決方法
Action獲取jsp表單中的中文參數(shù)，只要整個(gè)項(xiàng)目都采用UTF-8編碼格式都不會出現(xiàn)亂碼問題；但JSP中用到JS,并從JS向Action傳中文參數(shù)，就會出現(xiàn)中文亂的現(xiàn)象
2013-12-12
仿淘寶JSsearch搜索下拉深度用法
本篇文章通過仿照淘寶搜索關(guān)鍵字后下拉相關(guān)產(chǎn)品搜索樣子的制作，深度分析了JSsearch的用法，一起跟著小編學(xué)習(xí)下吧。
2018-01-01
深入理解JavaScript中的for循環(huán)
這篇文章主要給大家深入的介紹了JavaScript中的for循環(huán)，其中包括ES5中的三種for循環(huán)，分別是簡單for循環(huán)、for-in以及forEach，另外還詳細(xì)介紹了ES6新增的一種循環(huán)：for-of ，有需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02