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 22 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
如何实现vue的tree组件
Dec 03 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数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
浅析vue数据绑定
2017/01/17 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
python实现ip查询示例
2014/03/26 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
阿波罗盒子:Apollo Box
2017/08/14 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
几道Java和数据库的面试题
2013/05/30 面试题
电气自动化自荐信
2013/10/10 职场文书
毕业生实习鉴定
2013/12/11 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Python中的 Set 与 dict
2022/03/13 Python