动态生成二维码小案例

最新推荐文章于 2024-04-16 13:19:23 发布

原创最新推荐文章于 2024-04-16 13:19:23 发布 · 916 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html jquery css #web #web前端 #二维码

本文介绍了一个简单的网页应用，该应用使用jQuery UI和QR码插件从输入的文本生成二维码。用户可以输入房间号和桌号，点击提交后会在页面上显示相应的二维码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习jqueryui框架</title>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.qrcode.min.js"></script>
</head>
<body>
<input class="num1" type="text">
<input class="num2" type="text">
<button type="submit">提交</button>
<div id="code"></div>
<script>
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
$('button').on('click',function(){
$('#code').empty();
var htmlStr = "房间号："+$('.num1').val()+","+"桌号： "+$('.num2').val()
var str = toUtf8(htmlStr);
$('#code').qrcode(str);
})

</script>
</body>
</html>