二维码生成器
代码如下
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二维码生成器title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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加载失败，使用备用CDN
document.write('