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 相关文章推荐
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 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/09/09 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python匿名函数的使用方法解析
2019/10/10 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
农场厂长岗位职责
2013/12/28 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python