欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)簡單的點(diǎn)贊與踩功能示例

 更新時(shí)間：2018年12月05日 09:39:21   作者：匿名的girl  
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的點(diǎn)贊與踩功能,涉及javascript針對頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)簡單的點(diǎ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)試運(yùn)行工具：http://tools.jb51.net/code/WebCodeRun，測試上述代碼運(yùn)行效果。

或者使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：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點(diǎn)贊與踩</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>

運(yùn)行效果如下圖：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • JS常見錯(cuò)誤(Error)及處理方案詳解

    JS常見錯(cuò)誤(Error)及處理方案詳解

    這篇文章主要介紹了JS常見錯(cuò)誤(Error)及處理方案詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • Javascript的原型和原型鏈你了解嗎

    Javascript的原型和原型鏈你了解嗎

    這篇文章主要為大家詳細(xì)介紹了Javascript的原型和原型鏈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-03-03
  • JavaScript中Dom操作實(shí)例詳解

    JavaScript中Dom操作實(shí)例詳解

    這篇文章主要介紹了JavaScript中Dom操作,結(jié)合實(shí)例形式詳細(xì)分析了javascript針對dom元素節(jié)點(diǎn)增刪改查相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
    2019-07-07
  • 實(shí)例分析JS與Node.js中的事件循環(huán)

    實(shí)例分析JS與Node.js中的事件循環(huán)

    本篇文章通過實(shí)例給大家詳細(xì)分析了JS與Node.js中的事件的原理以及用法，大家學(xué)習(xí)一下吧。
    2017-12-12
  • 使用DeviceOne實(shí)現(xiàn)微信小程序功能

    使用DeviceOne實(shí)現(xiàn)微信小程序功能

    本文主要對小程序的優(yōu)缺點(diǎn)和DeviceOne的特點(diǎn)進(jìn)行介紹，分享了使用DeviceOne實(shí)現(xiàn)微信小程序功能的實(shí)例代碼，具有一定的參考價(jià)值。下面跟著小編一起來看下吧
    2016-12-12
  • webpack4 入門最簡單的例子介紹

    webpack4 入門最簡單的例子介紹

    這篇文章主要介紹了webpack4 入門最簡單的例子介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • js判斷子窗體是否關(guān)閉的方法

    js判斷子窗體是否關(guān)閉的方法

    這篇文章主要介紹了js判斷子窗體是否關(guān)閉的方法,涉及javascript針對子窗體的獲取與屬性判定技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-08-08
  • js實(shí)現(xiàn)的牛頓擺效果

    js實(shí)現(xiàn)的牛頓擺效果

    本文給大家分享的是使用javascript實(shí)現(xiàn)牛頓排球的特效，非常不錯(cuò)，這里推薦給大家，有相同需求的小伙伴能夠參考下。
    2015-03-03
  • js實(shí)現(xiàn)的訂閱發(fā)布者模式簡單示例

    js實(shí)現(xiàn)的訂閱發(fā)布者模式簡單示例

    這篇文章主要介紹了js實(shí)現(xiàn)的訂閱發(fā)布者模式,結(jié)合完整示例形式分析了js訂閱發(fā)布者模式相關(guān)實(shí)現(xiàn)與使用方法,需要的朋友可以參考下
    2020-03-03
  • JS實(shí)現(xiàn)簡單移動(dòng)端鼠標(biāo)拖拽

    JS實(shí)現(xiàn)簡單移動(dòng)端鼠標(biāo)拖拽

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單移動(dòng)端鼠標(biāo)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-07-07

最新評論