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 颜色选择器(兼容firefox)
Mar 05 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
python装饰器使用方法实例
2013/11/21 Python
python协程用法实例分析
2015/06/04 Python
Python实现的计数排序算法示例
2017/11/29 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
什么是Python中的匿名函数
2020/06/02 Python
python怎么自定义捕获错误
2020/06/29 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
森林防火工作方案
2014/02/14 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
维稳工作承诺书
2015/01/20 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书