^{<noscript id="rkv6g"></noscript>}

JavaScript實現點擊出現圖片并統計點擊次數功能示例

2019-11-19 13:26:05

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JavaScript實現點擊出現圖片并統計點擊次數功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>點擊出現圖片，再次點擊循環(huá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="顯示單擊次數" onclick="showClick()" style="width: 100px; height: 20px;color: blue; background-color: chartreuse" ><div id="img" style="display:none"><img src="http://tools.VeVB.COm/static/api/pintu/images/4/main.jpg"></div></body></html>

注：小編針對代碼的統計顯示功能稍作修改，同時加入了一張美女同事的照片做測試，使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun，獲得如下測試效果：