JS實現(xiàn)簡單的點贊與踩功能示例
更新時間：2018年12月05日 09:39:21 作者：匿名的girl
這篇文章主要介紹了JS實現(xiàn)簡單的點贊與踩功能,涉及javascript針對頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)簡單的點贊與踩功能。分享給大家供大家參考，具體如下：
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前端代碼調(diào)試運行工具：http://tools.jb51.net/code/WebCodeRun，測試上述代碼運行效果。
或者使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/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.dbjr.com.cn 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>
運行效果如下圖：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了JS常見錯誤(Error)及處理方案詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細介紹了Javascript的原型和原型鏈，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了JavaScript中Dom操作,結(jié)合實例形式詳細分析了javascript針對dom元素節(jié)點增刪改查相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-07-07
本篇文章通過實例給大家詳細分析了JS與Node.js中的事件的原理以及用法，大家學(xué)習(xí)一下吧。2017-12-12
本文主要對小程序的優(yōu)缺點和DeviceOne的特點進行介紹，分享了使用DeviceOne實現(xiàn)微信小程序功能的實例代碼，具有一定的參考價值。下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了webpack4 入門最簡單的例子介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了js判斷子窗體是否關(guān)閉的方法,涉及javascript針對子窗體的獲取與屬性判定技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
本文給大家分享的是使用javascript實現(xiàn)牛頓排球的特效，非常不錯，這里推薦給大家，有相同需求的小伙伴能夠參考下。2015-03-03
這篇文章主要介紹了js實現(xiàn)的訂閱發(fā)布者模式,結(jié)合完整示例形式分析了js訂閱發(fā)布者模式相關(guān)實現(xiàn)與使用方法,需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單移動端鼠標(biāo)拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07