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 相关文章推荐
js压缩利器
Feb 20 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
JavaScript中的类型检查
Feb 03 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
uni-app 自定义底部导航栏的实现
Dec 11 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
一个查看session内容的函数
2006/10/09 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
ES6的新特性概览
2016/03/10 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python实现全排列的打印
2018/08/18 Python
Python OpenCV实现视频分帧
2019/06/01 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
信息科学与技术专业求职信范文
2014/02/20 职场文书
百日安全活动总结
2014/05/04 职场文书
停车位租赁协议书
2014/09/24 职场文书
销售代理协议书
2014/09/30 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
公务员年度考核评语
2014/12/31 职场文书
神秘岛读书笔记
2015/07/01 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
Python机器学习三大件之一numpy
2021/05/10 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js