使用JS 插件qrcode.js生成二維碼功能
效果圖:

qrcode.js這是一個(gè)使用比較多的js生成二維碼的插件,使用也很方便,第一次用,記錄一下使用方法;
首先,導(dǎo)入js,這個(gè)網(wǎng)上可以找到,附上地址:https://github.com/davidshimjs/qrcodejs/
jsp:
<script type="text/javascript" src="<%=basePath %>bootstrap/js/qrcode.js" charset="UTF-8"></script>
<input type="hidden" id="content" value="" />
<!-- 二維碼彈出框 -->
div class="modal fade" id="myModal_qrcode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">二維碼</h4>
</div>
<div class="modal-body">
<center>
<div id="qrcode"></div>
<table>
<tbody>
<tr>
<td>
<label class="col-sm-4 control-label" for="equ_name_qrcode"><h7>設(shè)備名稱(chēng):</h7></label>
<div class="col-sm-8">
<input class="form-control" id="equ_name_qrcode" type="text"/>
</div>
</td>
<td>
<label class="col-sm-4 control-label" for="equ_ip_qrcode"><h7>設(shè)備IP:</h7></label>
<div class="col-sm-8">
<input class="form-control" id="equ_ip_qrcode" type="text"/>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>關(guān)閉
</button>
<button type="button" id="btn_print" class="btn btn-primary" data-dismiss="modal">
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>打印
</button>
</div>
</div>
</div>
/div>
js:
// 二維碼對(duì)象
var qrcode;
function showCode(id) {
var rowid=$("#grid-table").jqGrid("getGridParam","selrow");
if (rowid != null) {
var rowData = $("#grid-table").jqGrid('getRowData',rowid);
// 獲取內(nèi)容
$("#content").val("公司名稱(chēng):"+rowData.companyName+","+"設(shè)備IP:"+rowData.deviceIP+","+"投運(yùn)時(shí)間:"+rowData.inTime);
$("#equ_name_qrcode").val(rowData.deviceName);
$("#equ_ip_qrcode").val(rowData.deviceIP);
} else {
toastr.error("點(diǎn)擊錯(cuò)誤,請(qǐng)重新點(diǎn)擊");
return;
}
// 清除上一次的二維碼
if(qrcode){
$("#qrcode").html("");
}
// 創(chuàng)建二維碼
qrcode = new QRCode(document.getElementById("qrcode"), {
width : 150,//設(shè)置寬高
height : 150
});
$("#myModal_qrcode").modal();
// $(".btn_print").attr('id','btn_print'+id);
qrcode.makeCode(document.getElementById("content").value);
}
以上所述是小編給大家介紹的使用JS qrcode.js生成二維碼功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
淺談layui 綁定form submit提交表單的注意事項(xiàng)
今天小編就為大家分享一篇淺談layui 綁定form submit提交表單的注意事項(xiàng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
深入理解 webpack 文件打包機(jī)制(小結(jié))
這篇文章主要介紹了深入理解 webpack 文件打包機(jī)制(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
原生js實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇原生js實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
React類(lèi)組件轉(zhuǎn)換成函數(shù)式組件
Hooks讓我們?yōu)橄嗤墓δ芫帉?xiě)更少的代碼,我們需要編寫(xiě)的代碼越少,我們就可以越快地啟動(dòng)應(yīng)用程序,hooks需要在函數(shù)組件中使用,您不能在 React 類(lèi)中使用 hooks,函數(shù)式的 React 組件更加現(xiàn)代,并支持有用的 hooks,現(xiàn)在流行把舊式的類(lèi)組件轉(zhuǎn)換為函數(shù)式組件2024-01-01
使用Turn.js實(shí)現(xiàn)翻書(shū)效果的完整步驟
最近項(xiàng)目經(jīng)理我個(gè)項(xiàng)目練練手,其項(xiàng)目需求是要實(shí)現(xiàn)翻書(shū)效果,下面這篇文章主要給大家介紹了關(guān)于使用Turn.js實(shí)現(xiàn)翻書(shū)效果的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
基于JavaScript代碼實(shí)現(xiàn)pc與手機(jī)之間的跳轉(zhuǎn)
本文通過(guò)一段代碼實(shí)例給大家介紹pc跳轉(zhuǎn)手機(jī)代碼,手機(jī)跳轉(zhuǎn)pc網(wǎng)站代碼的相關(guān)知識(shí),對(duì)js跳轉(zhuǎn)代碼相關(guān)知識(shí)感興趣的朋友一起通過(guò)本篇文章學(xué)習(xí)吧2015-12-12
滑動(dòng)門(mén),簡(jiǎn)潔,新手上路制作篇 (小鴿子系列)
滑動(dòng)門(mén),簡(jiǎn)潔,新手上路制作篇 (小鴿子系列)...2007-04-04
(推薦一個(gè)超好的JS函數(shù)庫(kù))S.Sams Lifexperience ScriptClassLib
(推薦一個(gè)超好的JS函數(shù)庫(kù))S.Sams Lifexperience ScriptClassLib...2007-04-04

