基于jquery二維碼生成插件qrcode
更新時(shí)間：2017年01月07日 10:49:03 作者：好學(xué)的菜鳥
這篇文章主要為大家詳細(xì)介紹了基于jquery二維碼生成插件qrcode的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文將介紹一款基于jquery的二維碼生成插件qrcode，在頁面中調(diào)用該插件就能生成對應(yīng)的二維碼。
1、首先在頁面中加入jquery庫文件和qrcode插件。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script>
2、在頁面布局中添加一個(gè)div
<div class="modal-body" id="qrCode" style="left:40px"> </div>
3、調(diào)用qrcode插件。
var str = "http://" + location.host + "/ActivityDetail.html?id=" + row.ActivityGuid + "&isMail=" + row.isMail + "";
$("#qrCode").empty();
$('#qrCode').qrcode(str);
//$('#qrCode').qrcode("http://m.fzitv.net");//任意字符串
4、我們試驗(yàn)的時(shí)候發(fā)現(xiàn)不能識別中文內(nèi)容的二維碼，通過查找多方資料了解到，jquery-qrcode是采用charCodeAt()方式進(jìn)行編碼轉(zhuǎn)換的。而這個(gè)方法默認(rèn)會(huì)獲取它的Unicode編碼，如果有中文內(nèi)容，在生成二維碼前就要把字符串轉(zhuǎn)換成UTF-8，然后再生成二維碼。您可以通過以下函數(shù)來轉(zhuǎn)換中文字符串：
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
可以把這個(gè)方法直接寫入到引用的插件里面，后面直接調(diào)用即可。如下：
var str = toUtf8("2017雞年大吉！");
$('#qrCode').qrcode(str);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- javaScript生成支持中文帶logo的二維碼(jquery.qrcode.js)
- 使用jquery.qrcode.js生成二維碼插件
- 使用jQuery.Qrcode插件在客戶端動(dòng)態(tài)生成二維碼并添加自定義Logo
- jQuery qrcode生成二維碼的方法
- 使用jquery.qrcode.min.js實(shí)現(xiàn)中文轉(zhuǎn)化二維碼
- 使用jquery插件qrcode生成二維碼
- jquery插件qrcode在線生成二維碼
- 使用jquery組件qrcode生成二維碼及應(yīng)用指南
- 使用jquery.qrcode生成彩色二維碼實(shí)例
- 利用jquery.qrcode在頁面上生成二維碼且支持中文
相關(guān)文章
jQuery Selectors(選擇器)的使用(七、子元素篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實(shí)例方式進(jìn)行講述，以簡單，全面為基礎(chǔ)，不會(huì)涉及很深，我的學(xué)習(xí)方法：先入門，后進(jìn)階！2009-12-12
jquery入門—數(shù)據(jù)刪除與隔行變色以及圖片預(yù)覽
項(xiàng)目需求：表格中數(shù)據(jù)隔行變色、刪除數(shù)據(jù)、全選刪除、鼠標(biāo)移動(dòng)到圖片時(shí)顯示圖片預(yù)覽等等，感興趣的朋友可以參考下2013-01-01
晚上有插件可以實(shí)現(xiàn)"jquery tab"，但有點(diǎn)復(fù)雜了，我想寫個(gè)最簡單的，來實(shí)現(xiàn)"jquery tab"。而事實(shí)上確實(shí)很簡練2009-05-05
jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法
這篇文章主要介紹了jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法,需要的朋友可以參考下2014-05-05
仿當(dāng)當(dāng)網(wǎng)淘寶網(wǎng)等主流電子商務(wù)網(wǎng)站商品分類導(dǎo)航菜單
本文實(shí)現(xiàn)了一個(gè)分類導(dǎo)航的菜單,和大多數(shù)流行的電子商務(wù)網(wǎng)站類似，詳細(xì)的實(shí)現(xiàn)可以直接查看源代碼.所有的代碼都在一個(gè)sidebar.html文件中2013-09-09
在一個(gè)對象上觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對象的父級對象傳播，從里到外，直至它被處理,挺起來感覺這么不可思議，接下來為大家解除疑惑2012-12-12
這篇文章主要介紹了jQuery中trigger()與bind()用法,結(jié)合實(shí)例形式分析了trigger()與bind()的功能、定義及具體使用技巧,需要的朋友可以參考下2015-12-12
詳解ajax的data參數(shù)錯(cuò)誤導(dǎo)致頁面崩潰
本篇文章給大家詳細(xì)分析了ajax的data參數(shù)錯(cuò)誤導(dǎo)致頁面崩潰的原因以及解決辦法，有需要的朋友參考學(xué)習(xí)下。2018-04-04
這篇文章介紹了jQuery extend 的簡單實(shí)例，有需要的朋友可以可以參考一下2013-09-09
jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用
這篇文章主要介紹了jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用,涉及jQuery窗體調(diào)用的相關(guān)技巧,需要的朋友可以參考下2016-06-06