<!DOCTYPE html>
<html>
<style>
#qrcode{
position: absolute;
display: none;
left: 0;
top: 0;
width: 200;
height: 200;
}
.box{
position: relative;
margin-left: 30%;
margin-top: 500px;
}
</style>
<head>
<meta charset="UTF-8">
</head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<body>
<div class="box">
<input type="text" id="qrcode-input" value="www.baidu.com"/>
<button onClick="handelBtn()">测试按钮</button>
<div id="qrcode"></div>
</div>
</body>
<script>
// makeCode()
$(document).mouseup(function(e){
console.log(222);
let btn = $('#qrcode'); // 设置目标区域(排查点击不需要关闭的元素)
if(!btn.is(e.target)&&btn.has(e.target).length === 0){
console.log(333);
$('#qrcode').hide()
}
})
function handelBtn(){
console.log(111);
$('#qrcode').show()
makeCode()
}
function makeCode() {
// 需要生成二维码的字符串(可以为链接,可以为普通字符串,可以从外面传入)
var key = document.getElementById('qrcode-input').value
// 需要获取一个div实例,用于存放二维码
var div = document.getElementById('qrcode')
// 控制二维码的宽高(可拆分)
var qrcodeSize = 200
// 将这个div清空,防止重复生成
div.innerHTML = ''
var qrcode = new QRCode(div, {
width: qrcodeSize,
height: qrcodeSize,
text:key
});
// qrcode.makeCode(key);
}
</script>
</html>
二维码生成以及点击空白关闭弹出层
最新推荐文章于 2023-10-04 10:55:54 发布