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 03 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
实例讲解JS中pop使用方法
Jan 27 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删除文本文件中重复行的方法
2015/04/28 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中的localtime()方法使用详解
2015/05/22 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Python tkinter和exe打包的方法
2020/02/05 Python
Python实现汇率转换操作
2020/05/03 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
饮料业务员岗位职责
2013/12/15 职场文书
工作失误检讨书范文
2015/01/26 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
环卫工人慰问信
2015/02/15 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书