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函数、方法、对象代码
Oct 29 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
jQuery选择器实例应用
Jan 05 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
微信运维交互机器人的示例代码
Nov 12 Javascript
node实现爬虫的几种简易方式
Aug 22 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中动态显示签名和ip原理
2007/03/28 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
three.js实现圆柱体
2018/12/30 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
Python字符串格式化输出方法分析
2016/04/13 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
Python如何实现爬取B站视频
2020/05/20 Python
广告学专业毕业生自荐信
2013/09/24 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
平安工地建设方案
2014/05/06 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
授权收款委托书范本
2014/10/10 职场文书
优秀党支部申报材料
2014/12/24 职场文书
领导工作表现评语
2015/01/04 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android