JavaScript实现点赞与踩功能的完整示例

<!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>

<!-- 点赞和踩功能的实现 -->
    <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>