开发技术
HTML:用于搭建页面结构。
CSS:用于美化页面样式。
JavaScript:实现核心逻辑,包括文案生成、随机选择、复制功能等。
部分框架代码:
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>抖音评论生成器</title><style>/* 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;}</style> </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>// JavaScript 逻辑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('评论已复制到剪贴板!');});});</script> </body> </html>