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>m.survivalescaperooms.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>

運行效果如下圖：