二维码生成以及点击空白关闭弹出层

最新推荐文章于 2024-03-20 10:16:53 发布

原创最新推荐文章于 2024-03-20 10:16:53 发布 · 297 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文介绍了一个使用HTML、CSS和JavaScript实现的简单网页应用，该应用能够通过用户输入的内容生成对应的二维码，并提供了按钮控制二维码的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>