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>歡迎來到HTML頁面！</p>
    <button class="btn1">點(diǎn)贊??</button> <button class="btn2">踩??</button>

js代碼：

<!-- 點(diǎn)贊和踩功能的實(shí)現(xiàn) -->
    <script>
        window.onload =  function(){
            // 通過類名拿到兩個(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>

四、效果圖

未點(diǎn)擊前：

點(diǎn)擊后：

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

您可能感興趣的文章:

相關(guān)文章

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