JavaScript实现点赞功能

m0_74779077

已于 2023-07-11 21:33:38 修改

阅读量1.4k

点赞数 2

文章标签： javascript

于 2023-07-11 15:51:56 首次发布

本文链接：https://blog.csdn.net/m0_74779077/article/details/131661121

版权

该文介绍了一个简单的HTML页面，包含点赞和踩按钮。利用JavaScript的var关键字定义变量并实现点击按钮时的自增自减功能，动态更新点赞和踩的数量。文章详细讲解了var的作用域以及自增自减两种操作的差异，并提供了完整的HTML和JS代码示例。

摘要由CSDN通过智能技术生成

一、功能实现

有两个按钮，分别是点赞👍和踩👎。点击点赞按钮的时候，点赞的数量会+1，当点击踩按钮时，踩的数量就会显示-1。

二、主要知识点

1、var关键字

var关键字可以定义、初始化一个变量。var定义的变量是有作用范围的，也就是函数作用域或全局作用域。定义在函数内部就是局部作用域，只在函数内部使用。如果定义在函数外部，就是全局作用域。

2、变量的自增自减

自增和自减分别分为两类：

①变量++（--）：表示先输出变量，然后在自加（减）1；

②++（--）变量：表示先自加（减）1，然后在输出变量。

三、代码实现

html、css代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点赞功能实现</title>
    <style>
        button:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 点赞👍和踩👎图标样式 -->
    <p>欢迎来到HTML页面！</p>
    <button class="btn1">点赞👍</button> <button class="btn2">踩👎</button>

js代码：

<!-- 点赞和踩功能的实现 -->
    <script>
        window.onload =  function(){
            // 通过类名拿到两个按钮
            var btn1 = document.querySelector('.btn1');
            var btn2 = document.querySelector('.btn2');
            // 初始化点赞数量
            var addnum = 0;
            // 给点赞按钮添加点击事件，自增并替换输出
            btn1.addEventListener('click',function(){
                ++addnum;
                btn1.textContent = "点赞+"+addnum;
            })
            // 初始化踩数量
            var stepnum = 0;
            // 给踩按钮添加点击事件，自减并替换输出
            btn2.addEventListener('click',function(){
                --stepnum;
                btn2.textContent = "踩"+stepnum;
            })
        }
    </script>
</body>
</html>