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 基础学习笔记之文档处理
May 29 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
JavaScript实现表单验证功能
Dec 09 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
浅谈php命令行用法
2015/02/04 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
vue组件间的参数传递实例详解
2019/04/26 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
Django中的静态文件管理过程解析
2019/08/01 Python
python 实现两个线程交替执行
2020/05/02 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
教育项目合作协议书格式
2014/10/17 职场文书
介绍信格式
2015/01/30 职场文书
关于五一放假的通知
2015/08/18 职场文书