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脚本代码跑起来。
Jan 09 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 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中去除所有js,html,css代码
2010/10/12 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python多线程的退出控制实现
2020/08/10 Python
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
建筑学推荐信
2013/11/03 职场文书
《开国大典》教学反思
2014/04/19 职场文书
健康教育评估方案
2014/05/25 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2014个人年度工作总结
2014/12/15 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL