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 Event事件学习第一章 Event介绍
Feb 07 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
document.write的几点使用心得
May 14 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
vue使用video.js进行视频播放功能
Jul 18 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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
checkbox使用示例
2013/08/23 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
Python创建系统目录的方法
2015/03/11 Python
python调用API实现智能回复机器人
2018/04/10 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
教育学专业毕业生的自我评价
2013/11/21 职场文书
自荐信需注意事项
2014/01/25 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
2015年教师节慰问信
2015/03/23 职场文书
护士岗位竞聘书
2015/09/15 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server
python中对列表的删除和添加方法详解
2022/02/24 Python
python 实现图片特效处理
2022/04/03 Python
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技