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宝典学习笔记(下)
Jan 10 Javascript
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
javascript 无提示关闭窗口脚本
Aug 17 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
js 通用订单代码
Dec 23 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
ajax异步请求详解
Jan 06 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 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常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
Prototype Array对象 学习
2009/07/19 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python实现键盘控制鼠标移动
2020/11/27 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
python实现ip地址的包含关系判断
2020/02/07 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
判断单链表中是否存在环
2012/07/16 面试题
网站编辑求职信
2013/10/17 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
报关专员求职信范文
2014/02/22 职场文书
护士个人自我鉴定
2014/03/24 职场文书
应届生求职信范文
2014/05/26 职场文书
工程负责人任命书
2014/06/06 职场文书
精神病医院见习报告
2014/11/03 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
Python基于百度AI实现抓取表情包
2021/06/27 Python