89 lines
2.5 KiB
HTML
89 lines
2.5 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>导航的图标</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|||
|
|
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
|||
|
|
<style>
|
|||
|
|
.ok-body {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
blockquote {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.qr-box > div {
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="ok-body">
|
|||
|
|
<blockquote class="layui-elem-quote">
|
|||
|
|
<p>js生成二维码。（注意加入了两个生成二维码的工具类,使用其中一个即可）</p>
|
|||
|
|
<p><a target="_blank" href="https://github.com/alphatr/jquery-qrcode">jQqrcode</a>
|
|||
|
|
<p><a target="_blank" href="https://github.com/davidshimjs/qrcodejs">qrcode</a>
|
|||
|
|
</p>
|
|||
|
|
</blockquote>
|
|||
|
|
<pre lay-title="JavaScript">
|
|||
|
|
var q = new qrcode($("#qrcode")[0], {
|
|||
|
|
width: 200,
|
|||
|
|
height: 200,
|
|||
|
|
text: "http://ok-admin.xlbweb.cn/"
|
|||
|
|
});
|
|||
|
|
var q2 = $("#qrcodeCanvas3").qrcode({
|
|||
|
|
width: "200",
|
|||
|
|
height: "200",
|
|||
|
|
background: "transparent", //二维码的后景色（默认透明色）
|
|||
|
|
foreground: "#000000", //二维码的前景色（默认黑色）
|
|||
|
|
text: "http://ok-admin.xlbweb.cn/"
|
|||
|
|
});
|
|||
|
|
</pre>
|
|||
|
|
<div class="qr-box">
|
|||
|
|
<div id="qrcode"></div>
|
|||
|
|
<div id="qrcodeCanvas2"></div>
|
|||
|
|
<div id="qrcodeCanvas3"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
<script src="../../lib/layui/layui.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
layui.config({
|
|||
|
|
base: "/lib/okplugins/"
|
|||
|
|
}).use(['code', 'jquery', 'jQqrcode', 'qrcode'], function () {
|
|||
|
|
var code = layui.code,
|
|||
|
|
qrcode = layui.qrcode,
|
|||
|
|
$ = layui.jquery;
|
|||
|
|
code({
|
|||
|
|
elem: 'pre'
|
|||
|
|
});
|
|||
|
|
var q = new qrcode($("#qrcode")[0], {
|
|||
|
|
width: 200,
|
|||
|
|
height: 200,
|
|||
|
|
text: "http://ok-admin.xlbweb.cn/"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var q1 = $("#qrcodeCanvas2").qrcode({
|
|||
|
|
render: "canvas",//生成的对象元素(canvas,table)
|
|||
|
|
text: "http://ok-admin.xlbweb.cn/",
|
|||
|
|
width: "200", //二维码的宽度
|
|||
|
|
height: "200", //二维码的高度
|
|||
|
|
background: "#ffffff", //二维码的后景色
|
|||
|
|
foreground: "#000000", //二维码的前景色
|
|||
|
|
logo: 'https://gitee.com/instanceof/file/raw/master/img/9.jpg'//二维码中间的图片
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var q2 = $("#qrcodeCanvas3").qrcode({
|
|||
|
|
width: "200",
|
|||
|
|
height: "200",
|
|||
|
|
text: "http://ok-admin.xlbweb.cn/"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|