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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php escape URL编码
2008/12/10 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
深入学习JavaScript 高阶函数
2019/06/11 Javascript
python备份文件的脚本
2008/08/11 Python
Python实现list反转实例汇总
2014/11/11 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
python实现数据分析与建模
2019/07/11 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Ibatis如何使用动态表名
2015/07/12 面试题
NET程序员上机面试题
2015/05/23 面试题
有关打架的检讨书
2014/01/25 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
长征观后感
2015/06/09 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL