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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
js实现弹窗效果
Aug 09 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
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
ThinkPHP视图查询详解
2014/06/30 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
培养自己的php编码规范
2015/09/28 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
javascript 节点排序 2
2011/01/31 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
python docx 中文字体设置的操作方法
2018/05/08 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
python中什么是面向对象
2020/06/11 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
韩国商务邀请函
2014/01/14 职场文书
金融管理应届生求职信
2014/02/20 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
服务承诺书范文
2014/05/19 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
行政撤诉申请书
2015/05/18 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js