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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
微信小程序开发探究
Dec 27 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
Vue中使用Sortable的示例代码
Apr 07 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/02 无线电
四个PHP非常实用的功能
2015/09/29 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python 堆和优先队列的使用详解
2019/03/05 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
PHP如何对用户密码进行加密
2014/07/31 面试题
Ruby如何进行文件操作
2014/07/17 面试题
大学生个人自我鉴定
2013/12/03 职场文书
《老王》教学反思
2014/02/23 职场文书
清明节演讲稿
2014/05/27 职场文书
民事授权委托书范文
2014/08/02 职场文书
2014年团支书工作总结
2014/11/14 职场文书
草房子读书笔记
2015/06/29 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
分享几个简单MySQL优化小妙招
2022/03/31 MySQL