抖音评论内容生成软件，好评生成器自定义文案，js+html+css开发

2501_90254621

于 2025-01-12 15:05:11 发布

阅读量475

点赞数 6

文章标签： javascript html css

本文链接：https://blog.csdn.net/2501_90254621/article/details/145093336

版权

当然我们这里分享的仅仅是框架不包括完整代码仅供学习，层级可无限制添加的。

开发技术

HTML：用于搭建页面结构。
CSS：用于美化页面样式。
JavaScript：实现核心逻辑，包括文案生成、随机选择、复制功能等。

源码实现

1. HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖音评论生成器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>抖音评论生成器</h1>
        <div class="input-group">
            <label for="template">自定义文案模板：</label>
            <textarea id="template" placeholder="例如：这个视频太{形容词}了，{用户}真是{赞美词}！"></textarea>
        </div>
        <div class="input-group">
            <button id="generate-btn">生成评论</button>
            <button id="copy-btn">复制评论</button>
        </div>
        <div class="output-group">
            <label for="output">生成的评论：</label>
            <textarea id="output" readonly></textarea>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS 样式

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 400px;
    text-align: center;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.input-group, .output-group {
    margin-bottom: 15px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    resize: none;
}

button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}

#output {
    background-color: #f9f9f9;
}

3. JavaScript 逻辑

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const templateInput = document.getElementById('template');
    const generateBtn = document.getElementById('generate-btn');
    const copyBtn = document.getElementById('copy-btn');
    const outputArea = document.getElementById('output');

    // 预设的文案库
    const adjectives = ['棒', '有趣', '精彩', '搞笑', '感人'];
    const users = ['博主', '小姐姐', '小哥哥', 'UP主', '大神'];
    const praises = ['太有才了', '666', '爱了爱了', '笑死我了', '继续加油'];

    // 生成评论
    generateBtn.addEventListener('click', () => {
        const template = templateInput.value || '这个视频太{形容词}了，{用户}真是{赞美词}！';
        const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
        const user = users[Math.floor(Math.random() * users.length)];
        const praise = praises[Math.floor(Math.random() * praises.length)];

        const comment = template
            .replace('{形容词}', adjective)
            .replace('{用户}', user)
            .replace('{赞美词}', praise);

        outputArea.value = comment;
    });

    // 复制评论
    copyBtn.addEventListener('click', () => {
        outputArea.select();
        document.execCommand('copy');
        alert('评论已复制到剪贴板！');
    });
});