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 相关文章推荐
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
javascript实现异形滚动轮播
Nov 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
js计算精度问题小结
2013/04/22 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
Ionic快速安装教程
2016/06/03 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
利用python获得时间的实例说明
2013/03/25 Python
Python的函数的一些高阶特性
2015/04/27 Python
Python中的localtime()方法使用详解
2015/05/22 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
Python with语句用法原理详解
2020/07/03 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
关于期中考试的反思
2014/02/02 职场文书
法人委托书范本
2014/09/15 职场文书
化验室安全管理制度
2015/08/06 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
安全学习心得体会范文
2016/01/18 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis