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 相关文章推荐
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
四十九个javascript小知识实用技巧
Nov 20 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里得到前天和昨天的日期的代码
2007/08/16 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
jquery 指南/入门基础
2007/11/30 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
vue各种事件监听实例(小结)
2020/06/24 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Django中的用户身份验证示例详解
2019/08/07 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
小学毕业家长寄语
2014/01/19 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
党员服务承诺书
2014/05/28 职场文书
立项申请报告范本
2015/05/15 职场文书
春晚观后感
2015/06/11 职场文书
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
linux目录管理方法介绍
2022/06/01 Servers