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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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遍历CSV类实例
2015/04/14 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
jupyter安装小结
2016/03/13 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
Python API len函数操作过程解析
2020/03/05 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
优秀毕业生自荐信
2014/06/10 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis