JS实现简单的点赞与踩功能示例


Posted in Javascript onDecember 05, 2018

本文实例讲述了JS实现简单的点赞与踩功能。分享给大家供大家参考,具体如下:

HTML部分:

赞:<button id="btn_zan">0</button>
踩:<button id="btn_cai">0</button>

JS部分:

function dianZan(){
var i = 0;
return function(){
this.innerHTML ="+"+ ++i;
}
}
btn_zan.onclick = dianZan();
function caiZan(){
var i = 0;
return function(){
this.innerHTML = --i;
}
}
btn_cai.onclick = caiZan();

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun,测试上述代码运行效果。

或者使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试如下完整示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com JS点赞与踩</title>
</head>
<body>
赞:<button id="btn_zan">0</button>
踩:<button id="btn_cai">0</button>
<script>
function dianZan(){
var i = 0;
return function(){
this.innerHTML ="+"+ ++i;
}
}
btn_zan.onclick = dianZan();
function caiZan(){
var i = 0;
return function(){
this.innerHTML = --i;
}
}
btn_cai.onclick = caiZan();
</script>
</body>
</html>

运行效果如下图:

JS实现简单的点赞与踩功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
node.js的事件机制
Feb 08 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 #Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 #Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 #Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 #Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 #Javascript
vue-cli3搭建项目的详细步骤
Dec 05 #Javascript
详解vue中async-await的使用误区
Dec 05 #Javascript
You might like
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
开启PHP的伪静态模式
2015/12/31 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
详解php用static方法的原因
2018/09/12 PHP
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
Python深入学习之装饰器
2014/08/31 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
班组长竞聘书
2014/03/31 职场文书
毕业生对母校寄语
2015/02/26 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android