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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
建立文件交换功能的脚本(一)
2006/10/09 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
绘画设计学生的个人自我评价
2013/09/20 职场文书
小学生开学感言
2014/02/28 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
宣传稿格式范文
2015/07/23 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers