JavaScript實現(xiàn)點贊功能的示例

更新時間：2024年07月09日 11:59:45 作者：m0_74779077

本文主要介紹了JavaScript實現(xiàn)點贊功能的示例,分享給大家

一、功能實現(xiàn)

有兩個按鈕，分別是點贊??和踩??。點擊點贊按鈕的時候，點贊的數(shù)量會+1，當(dāng)點擊踩按鈕時，踩的數(shù)量就會顯示-1。

二、主要知識點

1、var關(guān)鍵字

var關(guān)鍵字可以定義、初始化一個變量。var定義的變量是有作用范圍的，也就是函數(shù)作用域或全局作用域。定義在函數(shù)內(nèi)部就是局部作用域，只在函數(shù)內(nèi)部使用。如果定義在函數(shù)外部，就是全局作用域。

2、變量的自增自減

自增和自減分別分為兩類：

①變量++（--）：表示先輸出變量，然后在自加（減）1；

②++（--）變量：表示先自加（減）1，然后在輸出變量。

三、代碼實現(xiàn)

html、css代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>點贊功能實現(xiàn)</title>
    <style>
        button:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 點贊??和踩??圖標(biāo)樣式 -->
    <p>歡迎來到HTML頁面！</p>
    <button class="btn1">點贊??</button> <button class="btn2">踩??</button>

js代碼：

<!-- 點贊和踩功能的實現(xiàn) -->
    <script>
        window.onload =  function(){
            // 通過類名拿到兩個按鈕
            var btn1 = document.querySelector('.btn1');
            var btn2 = document.querySelector('.btn2');
            // 初始化點贊數(shù)量
            var addnum = 0;
            // 給點贊按鈕添加點擊事件，自增并替換輸出
            btn1.addEventListener('click',function(){
                ++addnum;
                btn1.textContent = "點贊+"+addnum;
            })
            // 初始化踩數(shù)量
            var stepnum = 0;
            // 給踩按鈕添加點擊事件，自減并替換輸出
            btn2.addEventListener('click',function(){
                --stepnum;
                btn2.textContent = "踩"+stepnum;
            })
        }
    </script>
</body>
</html>