JS实现简单的点赞与踩功能示例

2019-11-19 12:24:26

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.VeVB.COm/code/WebCodeRun，测试上述代码运行效果。

或者使用在线HTML/CSS/JavaScript代码运行工具：http://tools.VeVB.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>www.VeVB.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>

运行效果如下图：