当前位置：首页 > news >正文

二维码生成器

news 2025/6/6 18:49:20

代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>二维码生成器</title><!-- 使用最新版本的qrcode.js库 --><script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script><style>* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;color: #333;}.container {width: 100%;max-width: 600px;background-color: white;border-radius: 16px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);overflow: hidden;}.header {background: linear-gradient(90deg, #3498db, #2c3e50);color: white;padding: 30px 20px;text-align: center;}h1 {font-size: 2.5rem;margin-bottom: 10px;letter-spacing: 1px;}.subtitle {font-size: 1.1rem;opacity: 0.9;max-width: 500px;margin: 0 auto;}.content {padding: 30px;}.input-container {margin-bottom: 25px;}#input-text {width: 100%;padding: 15px;border: 2px solid #e0e0e0;border-radius: 10px;font-size: 16px;resize: vertical;min-height: 120px;transition: border-color 0.3s, box-shadow 0.3s;}#input-text:focus {outline: none;border-color: #3498db;box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);}#input-text::placeholder {color: #aaa;}.qrcode-container {display: flex;flex-direction: column;align-items: center;margin: 30px 0;}#qrcode {width: 220px;height: 220px;background-color: white;border-radius: 12px;padding: 15px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);display: flex;justify-content: center;align-items: center;margin-bottom: 20px;transition: all 0.3s ease;}#qrcode.hidden {opacity: 0;transform: translateY(20px);}#qrcode.visible {opacity: 1;transform: translateY(0);}.placeholder {color: #aaa;text-align: center;padding: 40px 0;}.buttons {display: flex;justify-content: center;gap: 15px;margin-top: 20px;}button {padding: 14px 28px;border: none;border-radius: 50px;font-size: 16px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;gap: 8px;}#generate-btn {background: linear-gradient(90deg, #2ecc71, #27ae60);color: white;box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);}#generate-btn:hover {background: linear-gradient(90deg, #27ae60, #219653);transform: translateY(-2px);box-shadow: 0 6px 15px rgba(46, 204, 113, 0.4);}#download-btn {background: linear-gradient(90deg, #3498db, #2980b9);color: white;box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);}#download-btn:hover {background: linear-gradient(90deg, #2980b9, #2573a7);transform: translateY(-2px);box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);}button:disabled {opacity: 0.6;cursor: not-allowed;transform: none;box-shadow: none;}.footer {text-align: center;padding: 20px;color: #7f8c8d;font-size: 14px;border-top: 1px solid #eee;}.features {display: flex;justify-content: space-around;flex-wrap: wrap;margin: 25px 0;gap: 15px;}.feature {display: flex;align-items: center;gap: 10px;background: #f8f9fa;padding: 12px 20px;border-radius: 50px;font-size: 0.9rem;}.feature i {color: #3498db;font-size: 1.2rem;}@media (max-width: 500px) {.header {padding: 25px 15px;}h1 {font-size: 2rem;}.content {padding: 20px;}.buttons {flex-direction: column;}button {width: 100%;}}</style>
</head>
<body><div class="container"><div class="header"><h1>二维码生成器</h1><p class="subtitle">输入文本或URL，立即生成二维码 - 支持下载PNG格式</p></div><div class="content"><div class="input-container"><textarea id="input-text" rows="4" placeholder="请输入要生成二维码的文本或URL..."></textarea></div><div class="features"><div class="feature"><i>✓</i><span>支持任意文本</span></div><div class="feature"><i>✓</i><span>支持URL链接</span></div><div class="feature"><i>✓</i><span>高清PNG下载</span></div></div><div class="qrcode-container"><div id="qrcode" class="hidden"><div class="placeholder">二维码将显示在这里</div></div><div class="buttons"><button id="generate-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9"></path></svg>生成二维码</button><button id="download-btn" disabled><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>下载二维码</button></div></div></div><div class="footer"><p>© 2025 二维码生成器 | 快速、简单、免费</p></div></div><script>// 修复QRCode库引用问题if (typeof QRCode === 'undefined') {// 如果CDN加载失败，使用备用CDNdocument.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"><\/script>');}// DOM元素const inputText = document.getElementById('input-text');const qrcodeDiv = document.getElementById('qrcode');const generateBtn = document.getElementById('generate-btn');const downloadBtn = document.getElementById('download-btn');const placeholder = qrcodeDiv.querySelector('.placeholder');// 二维码生成函数function generateQRCode() {const text = inputText.value.trim();if (!text) {alert('请输入要生成二维码的文本或URL');return false;}try {// 清空之前的二维码qrcodeDiv.innerHTML = '';placeholder.style.display = 'none';// 生成新二维码new QRCode(qrcodeDiv, {text: text,width: 200,height: 200,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H});// 添加动画效果qrcodeDiv.classList.remove('hidden');qrcodeDiv.classList.add('visible');// 启用下载按钮downloadBtn.disabled = false;return true;} catch (error) {console.error('生成二维码失败:', error);alert('生成二维码失败，请重试');qrcodeDiv.innerHTML = '<div class="placeholder">生成失败，请重试</div>';placeholder.style.display = 'block';downloadBtn.disabled = true;return false;}}// 生成二维码按钮事件generateBtn.addEventListener('click', generateQRCode);// 下载二维码按钮事件downloadBtn.addEventListener('click', function() {if (qrcodeDiv.children.length === 0 || placeholder.style.display === 'block') {alert('请先生成二维码');return;}try {const canvas = qrcodeDiv.querySelector('canvas');const url = canvas.toDataURL('image/png');const a = document.createElement('a');a.href = url;a.download = '二维码-' + new Date().getTime() + '.png';document.body.appendChild(a);a.click();document.body.removeChild(a);// 添加下载反馈效果const originalText = downloadBtn.innerHTML;downloadBtn.innerHTML = '✓ 下载成功';downloadBtn.style.background = 'linear-gradient(90deg, #2ecc71, #27ae60)';setTimeout(() => {downloadBtn.innerHTML = originalText;downloadBtn.style.background = 'linear-gradient(90deg, #3498db, #2980b9)';}, 2000);} catch (error) {console.error('下载二维码失败:', error);alert('下载失败，请重试');}});// 输入变化时自动生成二维码（防抖处理）let debounceTimer;inputText.addEventListener('input', function() {clearTimeout(debounceTimer);const text = inputText.value.trim();if (text.length > 0) {generateBtn.disabled = true;generateBtn.innerHTML = '生成中...';debounceTimer = setTimeout(() => {generateQRCode();generateBtn.disabled = false;generateBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9"></path></svg> 生成二维码';}, 800);}});// 页面加载时初始化window.addEventListener('load', function() {// 示例文本inputText.value = 'https://blog.csdn.net/Liudef06/article/details/148429853?spm=1001.2014.3001.5502';setTimeout(generateQRCode, 1000);});</script>
</body>
</html>