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 YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
javascript中的array数组使用技巧
Jan 31 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
深入理解angularjs过滤器
May 25 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
Webpack3+React16代码分割的实现
Mar 03 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 xml文件操作实现代码(二)
2009/03/20 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
javascript简易画板开发
2020/04/12 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
用django设置session过期时间的方法解析
2019/08/05 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
机关门卫制度
2014/02/01 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
文明村镇申报材料
2014/05/06 职场文书
工作推荐信模板
2015/03/25 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
详解Python中的for循环
2022/04/30 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript