一键复制淘口令问题，不太会。

Crystαl · 发表于 6 天前

<!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> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .container { background: white; border-radius: 20px; padding: 40px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); max-width: 500px; width: 100%; text-align: center; } .title { font-size: 28px; font-weight: bold; color: #333; margin-bottom: 10px; } .subtitle { font-size: 14px; color: #666; margin-bottom: 30px; } .kouling-box { background: #f8f9fa; border: 2px dashed #dee2e6; border-radius: 12px; padding: 20px; margin-bottom: 25px; position: relative; } .kouling-label { font-size: 12px; color: #999; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } .kouling-text { font-size: 18px; font-weight: bold; color: #333; word-break: break-all; line-height: 1.6; } .copy-btn { background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%); color: white; border: none; padding: 15px 40px; font-size: 16px; font-weight: bold; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4); } .copy-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5); } .copy-btn:active { transform: translateY(0); } .copy-btn.success { background: linear-gradient(135deg, #51cf66 0%, #40c057 100%); box-shadow: 0 4px 15px rgba(81, 207, 102, 0.4); } .copy-btn.error { background: linear-gradient(135deg, #ff6b6b 0%, #fa5252 100%); } .tips { margin-top: 20px; font-size: 12px; color: #999; line-height: 1.6; } /* 动画效果 */ @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .copy-btn.success { animation: pulse 0.3s ease-in-out; } </style></head><body> <div class="container"> <div class="title">🛍️ 淘口令一键复制</div> <div class="subtitle">点击按钮即可复制淘口令到剪贴板</div> <div class="kouling-box"> <div class="kouling-label">专属淘口令</div> <div class="kouling-text" id="koulingText">￥ABC123456￥</div> </div>  <button class="copy-btn" data-clipboard-text="￥ABC123456￥" id="copyBtn"> 一键复制 </button> <div class="tips"> 💡 复制后打开淘宝/天猫APP即可自动识别<br> 支持iOS和Android系统 </div> </div>  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script> <script> // 初始化 ClipboardJS var clipboard = new ClipboardJS('.copy-btn'); // 复制成功事件 clipboard.on('success', function(e) { console.log('复制成功:', e.text); const btn = e.trigger; const originalText = '一键复制'; // 更新按钮状态 btn.textContent = '✓ 复制成功'; btn.classList.add('success'); // 2秒后恢复原始状态 setTimeout(function() { btn.textContent = originalText; btn.classList.remove('success'); }, 2000); // 清除选中状态 e.clearSelection(); }); // 复制失败事件 clipboard.on('error', function(e) { console.error('复制失败:', e); const btn = e.trigger; btn.textContent = '✕ 复制失败'; btn.classList.add('error'); setTimeout(function() { btn.textContent = '一键复制'; btn.classList.remove('error'); }, 2000); }); // 动态更新淘口令的示例（可选） function updateKouling(newKouling) { const koulingText = document.getElementById('koulingText'); const copyBtn = document.getElementById('copyBtn'); koulingText.textContent = newKouling; copyBtn.setAttribute('data-clipboard-text', newKouling); } // 示例：模拟从后端获取新的淘口令 // setTimeout(() => { // updateKouling('￥XYZ789012￥'); // }, 3000); </script></body></html>

复制代码

[backcolor=oklch(0.985 0.001 106.424)]动态更新淘口令的场景：
[backcolor=oklch(0.985 0.001 106.424)]

// 场景1: 从后端API获取async function fetchKouling() { const response = await fetch('/api/get-kouling'); const data = await response.json(); updateKouling(data.kouling);}// 场景2: 根据用户输入生成function generateKouling(productId) { const kouling = '￥' + productId + '￥'; updateKouling(kouling);}// 场景3: 从URL参数获取const urlParams = new URLSearchParams(window.location.search);const koulingFromUrl = urlParams.get('kouling');if (koulingFromUrl) { updateKouling(koulingFromUrl);}

复制代码