74 lines
2.4 KiB
HTML
74 lines
2.4 KiB
HTML
|
<!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/qrcodejs/qrcode.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
margin: 0;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
background-color: #f4f4f4;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
text-align: center;
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
#qrcode {
|
||
|
|
margin: 20px auto 0; /* 上下左右居中 */
|
||
|
|
display: inline-block; /* 保证生成的二维码容器大小适应内容 */
|
||
|
|
}
|
||
|
|
#error {
|
||
|
|
color: red;
|
||
|
|
margin-top: 10px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>文字转二维码</h1>
|
||
|
|
|
||
|
|
<form id="textForm">
|
||
|
|
<textarea id="inputText" name="inputText" rows="4" cols="50" placeholder="请输入要生成二维码的文字..." required></textarea><br><br>
|
||
|
|
|
||
|
|
<button type="submit">生成二维码</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div id="qrcode"></div>
|
||
|
|
<div id="error">输入的文字太长，无法生成二维码，请减少文字长度。</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const maxLength = 512; // QR码的最大字符长度限制
|
||
|
|
|
||
|
|
document.getElementById('textForm').addEventListener('submit', function(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
const inputText = document.getElementById('inputText').value;
|
||
|
|
const qrCodeContainer = document.getElementById('qrcode');
|
||
|
|
const errorContainer = document.getElementById('error');
|
||
|
|
|
||
|
|
// 清空之前的二维码和错误信息
|
||
|
|
qrCodeContainer.innerHTML = "";
|
||
|
|
errorContainer.style.display = 'none';
|
||
|
|
|
||
|
|
// 检查输入文字长度是否超过最大限制
|
||
|
|
if (inputText.length > maxLength) {
|
||
|
|
errorContainer.style.display = 'block'; // 显示错误信息
|
||
|
|
} else {
|
||
|
|
new QRCode(qrCodeContainer, inputText);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|