微博點(diǎn)贊是一個(gè)非常常見(jiàn)的社交功能，在實(shí)現(xiàn)上難度并不大。HTML微博點(diǎn)贊代碼一般包括三個(gè)部分：點(diǎn)贊按鈕、點(diǎn)贊數(shù)量和點(diǎn)贊狀態(tài)。

<!-- 點(diǎn)贊按鈕 -->
<button id="likeButton" onclick="like(this)">
<i class="fa fa-thumbs-up"></i> 點(diǎn)贊
</button>
<!-- 點(diǎn)贊數(shù)量 -->
<p id="likeNum" class="likeNum">99</p>
<!-- 點(diǎn)贊狀態(tài) -->
<p id="likeStatus" class="likeStatus hasLiked"><i class="fa fa-thumbs-up"></i> 已贊</p>

上面的HTML代碼中，我們首先定義了一個(gè)點(diǎn)贊按鈕，包括一個(gè)按鈕標(biāo)簽和一個(gè)按鈕圖標(biāo)。點(diǎn)擊按鈕后會(huì)執(zhí)行一個(gè)名為“l(fā)ike”的JavaScript函數(shù)。其次，我們定義了一個(gè)點(diǎn)贊數(shù)量，包括一個(gè)段落標(biāo)簽和一個(gè)類名為“l(fā)ikeNum”的css樣式。最后，我們定義了一個(gè)點(diǎn)贊狀態(tài)，包括一個(gè)段落標(biāo)簽、一個(gè)類名為“l(fā)ikeStatus”的css樣式和一個(gè)贊圖標(biāo)。點(diǎn)贊按鈕的點(diǎn)擊事件會(huì)使點(diǎn)贊狀態(tài)發(fā)生變化，從未贊到已贊，并且點(diǎn)贊數(shù)量加1。

// 定義JavaScript函數(shù)
function like(button) {
var num = document.getElementById("likeNum").innerHTML;
var status = document.getElementById("likeStatus");
if (status.classList.contains("hasLiked")) {
// 已經(jīng)點(diǎn)贊，取消贊
button.innerHTML = '<i class="fa fa-thumbs-up"></i> 點(diǎn)贊';
document.getElementById("likeNum").innerHTML = parseInt(num) - 1;
status.classList.remove("hasLiked");
} else {
// 沒(méi)有點(diǎn)贊，加上贊
button.innerHTML = '<i class="fa fa-thumbs-up"></i> 已贊';
document.getElementById("likeNum").innerHTML = parseInt(num) + 1;
status.classList.add("hasLiked");
}
}

JavaScript函數(shù)實(shí)現(xiàn)了點(diǎn)贊的邏輯。當(dāng)點(diǎn)贊狀態(tài)是已贊時(shí)，表示當(dāng)前用戶已經(jīng)點(diǎn)贊，此時(shí)需要執(zhí)行取消贊的邏輯。當(dāng)點(diǎn)贊狀態(tài)是未贊時(shí)，表示當(dāng)前用戶還沒(méi)有點(diǎn)贊，此時(shí)需要執(zhí)行加上贊的邏輯。函數(shù)中的關(guān)鍵點(diǎn)是對(duì)元素的操作，通過(guò)document對(duì)象的getElementById方法獲取到點(diǎn)贊數(shù)量和點(diǎn)贊狀態(tài)的元素，從而對(duì)它們進(jìn)行修改。