快捷導(dǎo)航

JavaScript實(shí)現(xiàn)點(diǎn)贊功能的示例

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

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

一、功能實(shí)現(xiàn)

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

二、主要知識(shí)點(diǎn)

1、var關(guān)鍵字

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

2、變量的自增自減

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

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

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

三、代碼實(shí)現(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>點(diǎn)贊功能實(shí)現(xiàn)</title>
    <style>
        button:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 點(diǎn)贊??和踩??圖標(biāo)樣式 -->
    <p>歡迎來(lái)到HTML頁(yè)面！</p>
    <button class="btn1">點(diǎn)贊??</button> <button class="btn2">踩??</button>

js代碼：

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