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 相关文章推荐
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 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
php防止站外远程提交表单的方法
2014/10/20 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
Python 装饰器使用详解
2017/07/29 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
优秀求职信范文分享
2014/01/26 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
服务行业演讲稿
2014/09/02 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
小学优秀学生评语
2014/12/29 职场文书
卫生主题班会
2015/08/14 职场文书
化工厂员工工作总结
2015/10/15 职场文书
PyTorch的Debug指南
2021/05/07 Python