点赞在js中怎么制作

点赞功能在JavaScript中可以通过多种方式实现，包括使用纯JavaScript、jQuery、以及结合后端的实现。 在本篇文章中，我将详细介绍如何使用纯JavaScript创建一个简单的点赞功能，并探讨如何将其与后端进行交互，以便实现更复杂的功能。

一、创建基础的点赞功能

在实现点赞功能之前，需要先准备好HTML结构和基本的CSS样式。以下是一个简单的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>
        .like-button {
            font-size: 20px;
            padding: 10px;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .like-count {
            font-size: 20px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <button class="like-button">👍 Like</button>
    <span class="like-count">0</span>
    <script src="like.js"></script>
</body>
</html>

1、添加JavaScript代码

接下来，我们在like.js文件中添加JavaScript代码，以便实现点赞功能。首先，我们需要获取按钮和显示点赞数的元素：

document.addEventListener('DOMContentLoaded', function() {
    const likeButton = document.querySelector('.like-button');
    const likeCount = document.querySelector('.like-count');
    let count = 0;
    likeButton.addEventListener('click', function() {
        count++;
        likeCount.textContent = count;
    });
});

在上面的代码中，我们使用addEventListener来监听按钮的点击事件，每次点击后都会增加点赞数并更新显示。

2、使用localStorage保存点赞数

为了在页面刷新后仍然保持点赞数，我们可以使用localStorage来保存点赞数：

document.addEventListener('DOMContentLoaded', function() {
    const likeButton = document.querySelector('.like-button');
    const likeCount = document.querySelector('.like-count');
    let count = parseInt(localStorage.getItem('likeCount')) || 0;
    likeCount.textContent = count;
    likeButton.addEventListener('click', function() {
        count++;
        likeCount.textContent = count;
        localStorage.setItem('likeCount', count);
    });
});

二、与后端进行交互

为了在多个用户之间同步点赞数，我们需要将点赞数保存到服务器。以下是一个简单的示例，展示如何使用Fetch API与后端进行交互。

1、设置后端API

首先，我们需要设置一个后端API来处理点赞数。以下是一个使用Node.js和Express的简单示例：

const express = require('express');
const app = express();
const port = 3000;
let likeCount = 0;
app.use(express.json());
app.get('/api/like-count', (req, res) => {
    res.json({ likeCount });
});
app.post('/api/like-count', (req, res) => {
    likeCount++;
    res.json({ likeCount });
});
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

2、修改前端代码

接下来，我们需要修改前端代码，以便在页面加载时获取点赞数，并在点击按钮时更新服务器上的点赞数：

document.addEventListener('DOMContentLoaded', async function() {
    const likeButton = document.querySelector('.like-button');
    const likeCount = document.querySelector('.like-count');
    async function fetchLikeCount() {
        const response = await fetch('/api/like-count');
        const data = await response.json();
        return data.likeCount;
    }
    async function updateLikeCount() {
        const response = await fetch('/api/like-count', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        const data = await response.json();
        return data.likeCount;
    }
    let count = await fetchLikeCount();
    likeCount.textContent = count;
    likeButton.addEventListener('click', async function() {
        count = await updateLikeCount();
        likeCount.textContent = count;
    });
});

三、优化用户体验

在实际应用中，我们需要考虑更多的用户体验优化，例如防止重复点击、加载动画等。

1、防止重复点击

为了防止用户快速重复点击按钮，可以在按钮点击后禁用按钮：

likeButton.addEventListener('click', async function() {
    likeButton.disabled = true;
    count = await updateLikeCount();
    likeCount.textContent = count;
    likeButton.disabled = false;
});

2、加载动画

在获取点赞数和更新点赞数时，可以显示加载动画以提升用户体验：

<style>
    .loading {
        display: none;
    }
    .loading.active {
        display: inline-block;
    }
</style>
<span class="loading">Loading...</span>

const loading = document.querySelector('.loading');
async function fetchLikeCount() {
    loading.classList.add('active');
    const response = await fetch('/api/like-count');
    const data = await response.json();
    loading.classList.remove('active');
    return data.likeCount;
}
async function updateLikeCount() {
    loading.classList.add('active');
    const response = await fetch('/api/like-count', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    });
    const data = await response.json();
    loading.classList.remove('active');
    return data.likeCount;
}

通过以上步骤，我们可以实现一个简单且功能完善的点赞功能，并且可以根据需要进一步优化和扩展。