JavaScript实现点击出现图片并统计点击次数功能示例


Posted in Javascript onJuly 23, 2018

本文实例讲述了JavaScript实现点击出现图片并统计点击次数功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>点击出现图片,再次点击循环出现</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.3water.com/static/api/pintu/images/4/main.jpg"></div>
</body>
</html>

注:小编针对代码的统计显示功能稍作修改,同时加入了一张美女同事的照片做测试,使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,获得如下测试效果:

JavaScript实现点击出现图片并统计点击次数功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript iframe编程相关代码
Dec 28 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 #Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 #Javascript
js正则表达式校验指定字符串的方法
Jul 23 #Javascript
js中时间格式化的几种方法
Jul 22 #Javascript
详解vue axios二次封装
Jul 22 #Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 #Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 #Javascript
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
深入分析js中的constructor和prototype
2012/04/07 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
Python调用JavaScript代码的方法
2020/10/27 Python
大专生自荐信
2013/10/04 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
化学教师教学反思
2014/01/17 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
规划编制实施方案
2014/03/15 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python