内容介绍
使用qrcode.js实例化二维码并调整二维码大小,将需要转为二维码的文本作为参数qrcode.makeCode(text)。
一、效果图
二、示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrcode.js生成二维码</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>
</head>
<body>
<div id="qrcode" style="border:10px solid #fff;position:fixed;top:20%;left:50%;transform: translate(-50%,0%);outline: 1px solid #999;"></div>
<script>
$(function() {
//实例化二维码并调整二维码大小
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 180,
height: 180,
correctLevel: QRCode.CorrectLevel.L
});
//生成二维码
function makeCode(promptText) {
//qrcode.clear();
qrcode.makeCode(promptText);
};
let result = prompt("输入需要转为二维码的文本", "https://liujianwei695.gitee.io/onlineeffect")
if (result) {
if (result.trim() === "") {
console.log("empty");
alert("输入为空,请输入有效值")
window.location.reload();
} else {
console.log("confirm");
//调用生成二维码方法
makeCode(result);
}
} else {
if (result === null) {
console.log("cancel");
alert("请选择确定,生成对应二维码")
} else if (result.trim() === "") {
console.log("empty");
alert("输入为空,请输入有效值")
}
window.location.reload();
}
})
</script>
<script>
console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');
</script>
</body>
</html>
标签:javascript,qrcode,插件,二维码
更多演示案例,查看 案例演示
欢迎评论留言!