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 构造函数 实例分析
Nov 26 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
javascript实现连续赋值
Aug 10 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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
PHP 八种基本的数据类型小结
2011/06/01 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
JQuery属性操作与循环用法示例
2019/05/15 jQuery
angular共享依赖的解决方案分享
2020/10/15 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
keras.layer.input()用法说明
2020/06/16 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
单位在职证明范本
2014/01/09 职场文书
寄语十八大感言
2014/02/07 职场文书
档案信息化建设方案
2014/05/16 职场文书
英语通知范文
2015/04/22 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
房屋所有权证明
2015/06/19 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis