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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
js读取配置文件自写
Feb 11 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
VUE重点问题总结
Mar 19 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 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采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php pdo操作数据库示例
2017/03/10 PHP
php将html转为图片的实现方法
2017/05/19 PHP
jQuery之折叠面板的深入解析
2013/06/19 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
js的三种继承方式详解
2017/01/21 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
渗透攻击的测试步骤
2014/06/07 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
函授自我鉴定
2013/11/06 职场文书
行政文员岗位职责
2013/11/08 职场文书
移动通信专业自荐信范文
2013/11/12 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
继承权公证书
2014/04/09 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
技术员岗位职责
2015/02/04 职场文书