生成二维码

直接在前台生成的不需要经过后台:所以用JS较多

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/framework-ui.js"></script>
<script src="~/Scripts/jquery.qrcode.js"></script>
<script src="~/Scripts/qrcode.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>

<script>
$(function () {
$('#qrcodeTable').qrcode({
render: "table",
text: "http://www.nfine.cn",
width: "265",
height: "265"
});
});
function createqrcode() {
if (!$('#form1').formValid()) {
return false;
}
$("#qrcodeTable").html("");
$('#qrcodeTable').qrcode({
render: "table",
text: $("#txt_barcod").val(),
width: "265",
height: "265"
});

 


}
</script>

<form id="form1">
<div class="mail-box">
<div class="mail-header">生成二维码</div>

 @*二维码测试 如需跳转则设置成http://www.baidu.com*@  
<div class="mail-body">
<table class="form">
<tr>
<th class="formTitle">二维码内容</th>
<td class="formValue">
<div class="input-group">
<input id="txt_barcod" name="txt_barcod" type="text" class="form-control required" placeholder="请输入要生成二维码的字符串">
<span class="input-group-btn">
<a onclick="createqrcode()" class="btn btn-primary" style="padding-left:10px;padding-right:10px;font-size:12px;line-height: 20px;">生成</a>
</span>
</div>
</td>
</tr>
<tr>
<th class="formTitle" valign="top" style="padding-top:25px;">二维码图像</th>
<td class="formValue" style="padding-top:20px;">
<div id="qrcodeTable"></div>
<div style="color: #aaaaaa;margin-top:10px;">使用微信扫一扫</div>
</td>
</tr>
</table>
</div>
</div>
</form>

 

posted @ 2018-08-13 11:01  一百百  阅读(105)  评论(0编辑  收藏  举报