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中匿名函数,函数直接量和闭包
May 08 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
详解javascript事件冒泡
Jan 09 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
Vue中render方法的使用详解
Jan 26 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 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 多维数组排序实现代码
2009/08/05 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
js闭包实例汇总
2014/11/09 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
原生js+canvas实现验证码
2020/11/29 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
酒店销售经理岗位职责
2014/01/31 职场文书
授权委托书
2014/09/17 职场文书
依法行政工作汇报
2014/10/28 职场文书
三峡导游词
2015/01/31 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
js之ajax文件上传
2021/05/13 Javascript