Qrcode二维码生成
废话不说，直接上代码：
官网API：http://code.ciaoca.com/javascript/qrcode/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
*{margin: 0;padding: 0}
html,body{width:100%;height: 100%;background:#FBF9FE;}
.userInfoList{width:700px; margin: 0 auto;left: 0;right: 0; background: #FFF;box-shadow: 0 0 5px #CCC;position: absolute;top: 0}
.userInfoList table{margin-top: 20px;}
.userInfoList table tr th:nth-of-type(1),td:nth-of-type(1){border-left:1px solid #c1c1c1;}
.userInfoList table tr td{border-top:none;}
.userInfoList table tr th,td{border:1px solid #c1c1c1;border-left: none; text-align: left;text-indent: 20px;height:35px;font-size: 14px;}
.userInfoList table tr th:nth-of-type(4){text-align: center;}
.pointer{cursor: pointer;}
.wait{cursor: wait;}
.showQrcode{border:1px solid #FFF;width: 200px;height: 200px;position: absolute;z-index: 1001;left: 0;right: 0;margin: 0 auto;padding: 10px;background: #FFF}
.display-none{display: none;}
#mask{width:100%; height:100%; background-color:#000000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);position: relative;z-index: 100}
</style>
<body>
<div id="mask" class="display-none"></div>
<div class="userInfoList">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>活动主题</th>
<th>活动时效</th>
<th>点击量</th>
<th colspan="5">操作</th>
</tr>
<tr>
<td>Test</td>
<td>永久</td>
<td>2</td>
<td class="wait">复制链接</td>
<td class="pointer qrcode" activeUrl="www.222222.222/222/22/2?2=2&2=2">二维码</td>
<td class="wait">下架</td>
<td class="wait">修改</td>
<td class="wait">删除</td>
</tr>
<tr>
<td>Test</td>
<td>永久</td>
<td>2</td>
<td class="wait">复制链接</td>
<td class="pointer qrcode" activeUrl="www.111111.111/11/11?11=11">二维码</td>
<td class="wait">下架</td>
<td class="wait">修改</td>
<td class="wait">删除</td>
</tr>
</table>
<div id="showQrcode" class="showQrcode display-none"></div>
</div>
</body>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<script type="text/javascript">
(function($){
let DOM = $("#showQrcode")[0]
let qrcode = new QRCode(DOM, {
width: 200,
height: 200,
colorDark : '#000000',
colorLight : '#ffffff',
correctLevel : QRCode.CorrectLevel.H
});
$("#mask").on("click", function(){
const $mask = $("#mask").is(":hidden");
if(!$mask){
$("#mask, #showQrcode").hide();
qrcode.clear();
}
});
$(".qrcode").on("click", function () {
const test = $(this).attr('activeUrl')
qrcode.makeCode(test);
$("#mask").fadeIn('slow/400/fast', function() {
$("#showQrcode").fadeIn('slow/0/fast', function() {
//qrcode.makeCode(test);
});
});
});
})(jQuery)
</script>
</html>
效果：
