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

H5实现一个二维码生成器页面

news 来源：原创 2025/4/28 13:48:46

功能：

1. 能够通过输入url链接然后生成对应的二维码

2. 能够适配暗黑模式

3. 支持下载二维码图片到本地

index.html

<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>二维码生成器</title><link rel="stylesheet" href="style.css"><!-- 引入qrcode.js库 --><script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
</head>
<body><div class="container"><div class="header"><h1>二维码生成器</h1><button id="themeToggle" class="theme-toggle"><span class="light-icon">🌞</span><span class="dark-icon">🌙</span></button></div><div class="input-group"><input type="text" id="qrContent" placeholder="请输入要生成二维码的内容" value="https://www.baidu.com"></div><button id="generateBtn">生成二维码</button><div class="qrcode-container"><div id="qrcode"></div><a id="downloadLink" download="qrcode.png" style="display: none;">下载二维码</a></div></div><script src="script.js"></script>
</body>
</html>

在html里声明标题、输入框、二维码展示区域、下载按钮、明亮/暗黑模式切换按钮

script.js

document.addEventListener('DOMContentLoaded', function() {const generateBtn = document.getElementById('generateBtn');const qrContent = document.getElementById('qrContent');const qrcodeDiv = document.getElementById('qrcode');const downloadLink = document.getElementById('downloadLink');const themeToggle = document.getElementById('themeToggle');// 主题切换功能themeToggle.addEventListener('click', function() {const html = document.documentElement;const currentTheme = html.getAttribute('data-theme');if (currentTheme === 'light') {html.setAttribute('data-theme', 'dark');localStorage.setItem('theme', 'dark');} else {html.setAttribute('data-theme', 'light');localStorage.setItem('theme', 'light');}});// 检查本地存储中的主题设置const savedTheme = localStorage.getItem('theme');if (savedTheme) {document.documentElement.setAttribute('data-theme', savedTheme);} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {// 如果用户系统偏好暗色模式，则自动设置为暗色模式document.documentElement.setAttribute('data-theme', 'dark');}// 点击按钮生成二维码generateBtn.addEventListener('click', function() {// 清空之前的二维码qrcodeDiv.innerHTML = '';// 重置下载链接显示downloadLink.style.display = 'none';// 获取输入内容const content = qrContent.value.trim();if (content === '') {alert('请输入要生成二维码的内容');return;}// 创建二维码const qrcode = new QRCode(qrcodeDiv, {text: content,width: 200,height: 200,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H});// 确保二维码容器在暗黑模式下也有白色背景qrcodeDiv.style.backgroundColor = 'white';qrcodeDiv.style.padding = '10px';// 延迟一下，确保二维码已经渲染完成setTimeout(() => {// 获取二维码图片const qrImage = qrcodeDiv.querySelector('img');// 创建下载链接downloadLink.href = qrImage.src;downloadLink.style.display = 'inline-block';}, 100);});
});

style.css

:root {--bg-color: #f5f5f5;--container-bg: #fff;--text-color: #333;--border-color: #ddd;--primary-color: #4a90e2;--primary-hover: #3a80d2;--success-color: #4caf50;--success-hover: #45a049;--shadow-color: rgba(0, 0, 0, 0.1);
}[data-theme="dark"] {--bg-color: #222;--container-bg: #333;--text-color: #eee;--border-color: #555;--primary-color: #5a9fe2;--primary-hover: #4a90e2;--success-color: #5cbf60;--success-hover: #4caf50;--shadow-color: rgba(0, 0, 0, 0.3);
}* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;background-color: var(--bg-color);color: var(--text-color);line-height: 1.6;transition: background-color 0.3s, color 0.3s;
}.container {max-width: 500px;margin: 30px auto;padding: 20px;background-color: var(--container-bg);border-radius: 10px;box-shadow: 0 2px 10px var(--shadow-color);transition: background-color 0.3s, box-shadow 0.3s;
}.header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;
}h1 {color: var(--text-color);transition: color 0.3s;
}.theme-toggle {background: none;border: none;cursor: pointer;font-size: 24px;display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;background-color: var(--primary-color);color: white;transition: background-color 0.3s;
}.theme-toggle:hover {background-color: var(--primary-hover);
}.light-icon {display: none;
}.dark-icon {display: block;
}[data-theme="dark"] .light-icon {display: block;
}[data-theme="dark"] .dark-icon {display: none;
}.input-group {margin-bottom: 20px;
}input[type="text"] {width: 100%;padding: 12px;border: 1px solid var(--border-color);border-radius: 5px;font-size: 16px;outline: none;transition: border-color 0.3s;background-color: var(--container-bg);color: var(--text-color);
}input[type="text"]:focus {border-color: var(--primary-color);
}button {display: block;width: 100%;padding: 12px;background-color: var(--primary-color);color: white;border: none;border-radius: 5px;font-size: 16px;cursor: pointer;transition: background-color 0.3s;
}button:hover {background-color: var(--primary-hover);
}.qrcode-container {margin-top: 30px;text-align: center;display: flex;flex-direction: column;align-items: center;
}#qrcode {margin: 0 auto;padding: 10px;background-color: white;border-radius: 5px;display: inline-block;min-height: 0;min-width: 0;
}/* 在暗黑模式下隐藏二维码容器，只在生成二维码后显示 */
[data-theme="dark"] #qrcode:empty {background-color: transparent;
}/* 确保二维码容器在没有内容时不显示 */
#qrcode:empty {background-color: transparent;padding: 0;
}#downloadLink {display: inline-block;margin-top: 15px;padding: 10px 20px;background-color: var(--success-color);color: white;text-decoration: none;border-radius: 5px;font-size: 14px;transition: background-color 0.3s;width: 200px;text-align: center;
}#downloadLink:hover {background-color: var(--success-hover);
}

效果如图所示：