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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 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函数
2006/12/06 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Python ORM编程基础示例
2020/02/02 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
毕业生求职推荐信
2013/11/04 职场文书
新闻专业个人求职信
2013/12/19 职场文书
八年级历史教学反思
2014/01/10 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2015年度物流工作总结
2015/04/30 职场文书
创业计划书之美甲店
2019/09/20 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL