js完整代码，引用了qrcode.min.js ，jquery.min.js
效果图 连接别忘记加上http://哦
代码中引用的qrcode.min.js ，jquery.min.js 可以去网上百度下载
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/qrcode.min.js"></script>
<!-- <script src="./js/jquery.min.js"></script> -->
<style>
.btn-wrap{
display: flex;
flex-wrap: nowrap;
}
body{
padding:10px;
}
input{
width: 300px;
height: 34px;
padding-left: 10px;
margin-right: 5px;
box-sizing: border-box;
}
button{
border-radius: 0;
width:100px;
height: 34px;
font-weight: 400;
background: linear-gradient(45deg,#7bd6fe,#0072f0);
outline: none;
border:none;
color:#fff;
}
</style>
</head>
<body>
<div class="btn-wrap">
<input type="text" placeholder="请输入网址" id="input" oninput="handleInput()"> <button id="button">生成二维码</button>
</div>
<div id="qrcode" style="margin-top:20px">
</div>
<script>
document.getElementById("button").onclick=function(){
handleInput();
let inputDomValue = document.getElementById('input').value;
if(!inputDomValue){
alert("请输入网址");
return
}
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: inputDomValue,
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
});
}
function handleInput(){
let qrcode = document.getElementById('qrcode');
qrcode.innerHTML="";
}
</script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/180651.html原文链接：https://javaforall.cn
