当前位置：首页 > JavaScript

js实现like

2026-03-13 16:35:48JavaScript

实现点赞功能（Like）的 JavaScript 方法

前端实现

HTML 结构

<button id="likeButton">Like</button>
<span id="likeCount">0</span>

JavaScript 逻辑

const likeButton = document.getElementById('likeButton');
const likeCount = document.getElementById('likeCount');
let count = 0;

likeButton.addEventListener('click', () => {
    count++;
    likeCount.textContent = count;
    likeButton.disabled = true; // 防止重复点击
});

后端交互实现（使用 Fetch API）

likeButton.addEventListener('click', async () => {
    try {
        const response = await fetch('/api/like', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });
        const data = await response.json();
        likeCount.textContent = data.likes;
    } catch (error) {
        console.error('Error:', error);
    }
});

本地存储方案（防止重复点赞）

likeButton.addEventListener('click', () => {
    if (localStorage.getItem('liked') === 'true') return;

    count++;
    likeCount.textContent = count;
    localStorage.setItem('liked', 'true');
});

动画效果增强

likeButton.addEventListener('click', () => {
    likeButton.classList.add('animate');
    setTimeout(() => {
        likeButton.classList.remove('animate');
    }, 300);
});

CSS 部分：

js实现like

.animate {
    transform: scale(1.2);
    transition: transform 0.3s;
}

完整示例（React 版本）

import { useState } from 'react';

function LikeButton() {
    const [likes, setLikes] = useState(0);
    const [liked, setLiked] = useState(false);

    const handleLike = () => {
        if (liked) return;
        setLikes(likes + 1);
        setLiked(true);
    };

    return (
        <button 
            onClick={handleLike}
            style={{ color: liked ? 'red' : 'black' }}
        >
            ♥ {likes}
        </button>
    );
}