因爲部分原因，前端頁面需要用到二維碼，後臺處理起來又比較費事一些，需要前端來進行處理，後臺返回一個二維碼的鏈接，前端生成一個二維碼
一定要引入qrcode.min.js
我自己使用的是哪個版本，忘記了，我新找了一個鏈接，應該可以直接使用
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<!DOCTYPE html>
<html lang="en" data-use-rem="750">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>二維碼</title>
<style>
html,
body {
width: 100%;
height: 100%;
background: url("./img/bj.png") no-repeat;
background-size: 100% 100%;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box {
position: fixed;
left: 50%;
top: 72%;
width: 3.6rem;
margin-left: -1.8rem;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.walletAddressImg {
width: 90px;
height: 90px;
background: url("./img/kuang.png") no-repeat;
background-size: 100% 100%;
padding: 0.1rem;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.walletAddressImg img {
margin: 0 auto;
/*margin-top: 3px;*/
}
.code {
text-align: center;
width: 3.6rem;
height: 0.7rem;
line-height: 0.7rem;
margin-top: 0.2rem;
background: url("./img/fuzhi.png") no-repeat;
background-size: 100% 100%;
}
a {
display: block;
height: 100%;
text-decoration: none;
font-size: 0.32rem;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<input id="text" type="hidden" />
<div id="qrcode" class="walletAddressImg"></div>
<div class="code">
<a href="#">推廣二維碼</a>
</div>
</div>
<script src="./jquery.js"></script>
<script src="./qrcode.min.js"></script>
<script>
$(function () {
var url = "www.baidu.com";
makeCode(url);
});
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 80,
height: 80
});
function makeCode(url) {
var elText = document.getElementById("text");
var elTextVal = document.getElementById("text").value = url;
if (!elText.value) {
console.log("爲空");
elText.focus();
return;
}
qrcode.makeCode(elTextVal);
}
// $("#text").on("blur", function () {
// makeCode();
// }).on("keydown", function (e) {
// if (e.keyCode == 13) {
// makeCode();
// }
// });
</script>
</body>
</html>
js 生成二維碼 qrcode jq
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章