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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
原生js简单实现放大镜特效
May 16 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
微信小程序反编译的实现
Dec 10 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 Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
Python读写/追加excel文件Demo分享
2018/05/03 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
职业生涯规划书前言
2014/04/15 职场文书
家长建议怎么写
2014/05/15 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
信用卡工作证明模板
2014/09/14 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
体育教师个人总结
2015/02/09 职场文书
军训个人总结
2015/03/03 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
SQL注入详解及防范方法
2021/12/06 MySQL
Python PIL按比例裁剪图片
2022/05/11 Python
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers