HTML點贊是一個非常簡單的功能,只需要一點代碼就可以實現。以下是一個基本的HTML點贊的代碼:
<html> <head> <title>HTML點贊</title> <script> function like() { var like_button = document.getElementById('like_button'); var like_count = document.getElementById('like_count'); var count = parseInt(like_count.innerText); like_button.style.color = 'red'; like_count.innerText = count + 1; } </script> <style> #like_button:hover { cursor: pointer; text-decoration: underline; } </style> </head> <body> <p>這是一篇很棒的文章!</p> <p>點贊人數: <span id="like_count">0</span></p> <p><span id="like_button" onclick="like()">贊</span></p> </body> </html>
這個代碼包含三個元素:
- 一個包含文本的p標簽,表示文章的內容。
- 一個包含點贊人數的span標簽,使用id屬性命名為like_count。
- 一個包含點贊按鈕的span標簽,使用id屬性命名為like_button,添加一個onclick事件,點擊后會執行JS中的like函數。
在JS中,like函數會獲取like_button和like_count這兩個元素,然后將點贊人數加1,并將贊按鈕的顏色設為紅色。
在CSS中,我們添加了一個:hover偽類,當鼠標懸停在贊按鈕上時,會使鼠標形狀變為手指,并且在下劃線標注中顯示可單擊的文本。
這是一個簡單而有用的HTML點贊代碼,可以輕松地將它添加到任何文章或網頁中,讓您的讀者通過單擊一下的方式表達上贊。