JS實現(xiàn)簡單的點贊與踩功能示例
更新時間：2018年12月05日 09:39:21 作者：匿名的girl
這篇文章主要介紹了JS實現(xiàn)簡單的點贊與踩功能,涉及javascript針對頁面元素動態(tài)操作相關實現(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前端代碼調試運行工具：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>m.fzitv.net 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>
運行效果如下圖：
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
在JavaScript中，判斷兩個對象是否相等有多種方法，取決于你對相等的定義以及對象屬性的類型，本文將介紹幾種常見的方法，感興趣的同學可以參考閱讀2023-05-05
這篇文章主要為大家介紹了javascript實現(xiàn)2016新年版日歷的詳細代碼，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了JS+CSS實現(xiàn)Li列表隔行換色效果的方法,實例分析了js操作li節(jié)點的技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了通過實例解析javascript Date對象屬性及方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
本文主要講訴了使用js實現(xiàn)網(wǎng)站功能兼容IE6，非常的實用的小技巧，有需要的朋友可以參考下2014-09-09
Bootstrap每天必學之導航條，進一步向大家講解了導航條養(yǎng)殖，以及導航條中元素的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript代碼實現(xiàn)圖片循環(huán)滾動效果
這篇文章主要介紹了JavaScript代碼實現(xiàn)圖片循環(huán)滾動效果的相關資料,非常不錯，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2016-06-06
uniapp開發(fā)App出現(xiàn)網(wǎng)絡異常的解決方法
這篇文章主要給大家介紹了uniapp開發(fā)App出現(xiàn)網(wǎng)絡異常的解決方案,文中有相關的解決方法和步驟,具有一定的參考價值,需要的朋友可以參考下2023-09-09
優(yōu)化javascript的執(zhí)行效率一些方法總結
本文為大家介紹下優(yōu)化javascript的執(zhí)行效率一些方法，個人感覺還不錯，感興趣的朋友可以了解下2013-12-12
這篇文章主要為大家詳細介紹了如何使用JavaScript+CSS實現(xiàn)一個隨機顏色生成器，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下2022-08-08