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>
    <!-- 點贊??和踩??圖標樣式 -->
    <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>

四、效果圖

未點擊前：

點擊后：

到此這篇關(guān)于JavaScript實現(xiàn)點贊功能的示例的文章就介紹到這了,更多相關(guān)JavaScript 點贊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

微信小程序全局配置以及頁面配置詳解
微信小程序中我們創(chuàng)建頁面時會自動創(chuàng)建四個文件分別為js文件,wxml文件wxss文件最后還有我們今天的主角json配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置以及頁面配置的相關(guān)資料,需要的朋友可以參考下
2022-07-07
前端實現(xiàn)界面切換主題代碼示例
這篇文章主要介紹了前端實現(xiàn)界面切換主題的相關(guān)資料,文中介紹了兩種方法,通過link標簽的rel屬性和通過變量設(shè)置,前者適用于確定的主題樣式切換,后者則適用于在拾色器中任意選擇顏色更換主題的情況,需要的朋友可以參考下
2025-02-02
JS路由跳轉(zhuǎn)的簡單實現(xiàn)代碼
本文給大家分享一個簡單的js路由跳轉(zhuǎn)功能，非常不錯，需要的朋友參考下吧
2017-09-09
Echarts圖表位置調(diào)整的圖文教程
實際過程中你會發(fā)現(xiàn)圖表在div中的位置不太理想,這時怎么去調(diào)整呢?下面這篇文章主要給大家介紹了關(guān)于Echarts圖表位置調(diào)整的相關(guān)資料,需要的朋友可以參考下
2022-10-10
javascript ES6 Template String模板字符串使用方法
這篇文章主要介紹了javascript ES6 模板字符串(Template String)是增強版的字符串，用反引號(`)標識，它可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量,需要的朋友可以參考下
2023-06-06
仿百度換膚功能的簡單實例代碼
下面小編就為大家?guī)硪黄掳俣葥Q膚功能的簡單實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
knockoutjs動態(tài)加載外部的file作為component中的template數(shù)據(jù)源的實現(xiàn)方法
Knockoutjs 的Components 是一種自定義的組件，它以一種強大、簡介的方式將你自己的ui代碼組織成一種單獨的、可重用的模塊。接下來通過本文給大家介紹knockoutjs動態(tài)加載外部的file作為component中的template數(shù)據(jù)源的實現(xiàn)方法，一起看看吧
2016-09-09
JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個方法技巧,需要的朋友可以參考下
2015-07-07
詳解用Webpack與Babel配置ES6開發(fā)環(huán)境
這篇文章主要介紹了詳解用Webpack與Babel配置ES6開發(fā)環(huán)境，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
使用JavaScript開發(fā)跨平臺的桌面應(yīng)用詳解
下面小編就為大家?guī)硪黄褂肑avaScript開發(fā)跨平臺的桌面應(yīng)用詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07