|
|
// main.js
|
|
|
|
|
|
// 当整个页面的HTML内容加载完成后，执行此函数
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
// 获取页面上的关键元素
|
|
|
const textInput = document.getElementById('text-input');
|
|
|
const generateBtn = document.getElementById('generate-btn');
|
|
|
const qrcodeContainer = document.getElementById('qrcode-container');
|
|
|
|
|
|
// 为“生成二维码”按钮添加点击事件监听器
|
|
|
generateBtn.addEventListener('click', () => {
|
|
|
// 获取输入框中的文本，并用 trim() 清除前后的空白字符
|
|
|
const text = textInput.value.trim();
|
|
|
|
|
|
// 在生成新的二维码之前，清空之前可能存在的旧二维码
|
|
|
qrcodeContainer.innerHTML = '';
|
|
|
|
|
|
// 如果文本为空，则不执行任何操作
|
|
|
if (!text) {
|
|
|
console.log('输入内容为空，已中止生成。');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 定义每个二维码的最大字符数
|
|
|
const chunkSize = 1000;
|
|
|
// 计算需要生成多少个二维码
|
|
|
const totalChunks = Math.ceil(text.length / chunkSize);
|
|
|
|
|
|
console.log(`总字符数: ${text.length}，将生成 ${totalChunks} 个二维码。`);
|
|
|
|
|
|
// 循环处理每一块文本
|
|
|
for (let i = 0; i < totalChunks; i++) {
|
|
|
// 计算当前块的起始和结束位置
|
|
|
const start = i * chunkSize;
|
|
|
const end = start + chunkSize;
|
|
|
// 从总文本中截取当前块的文本
|
|
|
const chunk = text.substring(start, end);
|
|
|
|
|
|
// --- 创建包裹单个二维码及其标签的容器 ---
|
|
|
const itemDiv = document.createElement('div');
|
|
|
itemDiv.className = 'qrcode-item';
|
|
|
|
|
|
// --- 创建并添加序号标签 ---
|
|
|
const label = document.createElement('p');
|
|
|
label.className = 'qrcode-label';
|
|
|
// 如果总数大于1，则显示 "二维码 x/y"，否则只显示 "二维码"
|
|
|
label.textContent = totalChunks > 1 ? `二维码 ${i + 1}/${totalChunks}` : '二维码';
|
|
|
itemDiv.appendChild(label);
|
|
|
|
|
|
// --- 创建用于生成二维码的占位符元素 ---
|
|
|
const qrcodeDiv = document.createElement('div');
|
|
|
// 给这个div一个唯一的ID，虽然qrcodejs也可以直接接收元素对象
|
|
|
qrcodeDiv.id = `qrcode-${i}`;
|
|
|
itemDiv.appendChild(qrcodeDiv);
|
|
|
|
|
|
// --- 将完整的二维码项（标签+占位符）添加到主容器中 ---
|
|
|
qrcodeContainer.appendChild(itemDiv);
|
|
|
|
|
|
// --- 使用 qrcode.js 库生成二维码 ---
|
|
|
// 实例化 QRCode 对象
|
|
|
// 第一个参数是二维码要渲染到的DOM元素
|
|
|
// 第二个参数是配置对象
|
|
|
new QRCode(qrcodeDiv, {
|
|
|
text: chunk, // 当前块的文本内容
|
|
|
width: 400, // 二维码宽度
|
|
|
height: 400, // 二维码高度
|
|
|
colorDark: '#000000', // 二维码颜色
|
|
|
colorLight: '#ffffff', // 二维码背景色
|
|
|
correctLevel: QRCode.CorrectLevel.H, // 纠错级别，H是最高级
|
|
|
});
|
|
|
|
|
|
console.log(`已为第 ${i + 1} 块内容生成二维码。`);
|
|
|
}
|
|
|
});
|
|
|
});
|