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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
小程序实现多列选择器
Feb 15 Javascript
详解nvm管理多版本node踩坑
Jul 26 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删除非空目录的函数代码小结
2013/02/28 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Django之模型层多表操作的实现
2019/01/08 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
幼儿园美术教学反思
2014/01/31 职场文书
志愿者活动总结
2014/04/28 职场文书
地道战观后感500字
2015/06/04 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
六五普法心得体会2016
2016/01/21 职场文书
python 调用js的四种方式
2021/04/11 Python
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python