快捷導(dǎo)航

基于jquery二維碼生成插件qrcode

更新時間：2017年01月07日 10:49:03 作者：好學(xué)的菜鳥

這篇文章主要為大家詳細介紹了基于jquery二維碼生成插件qrcode的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文將介紹一款基于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、在頁面布局中添加一個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://www.fzitv.net");//任意字符串

4、我們試驗的時候發(fā)現(xiàn)不能識別中文內(nèi)容的二維碼，通過查找多方資料了解到，jquery-qrcode是采用charCodeAt()方式進行編碼轉(zhuǎn)換的。而這個方法默認會獲取它的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;  
}

可以把這個方法直接寫入到引用的插件里面，后面直接調(diào)用即可。如下：

var str = toUtf8("2017雞年大吉！");
$('#qrCode').qrcode(str);

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery Selectors(選擇器)的使用(七、子元素篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實例方式進行講述，以簡單，全面為基礎(chǔ)，不會涉及很深，我的學(xué)習(xí)方法：先入門，后進階！
2009-12-12
jquery入門—數(shù)據(jù)刪除與隔行變色以及圖片預(yù)覽
項目需求：表格中數(shù)據(jù)隔行變色、刪除數(shù)據(jù)、全選刪除、鼠標移動到圖片時顯示圖片預(yù)覽等等，感興趣的朋友可以參考下
2013-01-01
jquery tabs的實現(xiàn)代碼
晚上有插件可以實現(xiàn)"jquery tab"，但有點復(fù)雜了，我想寫個最簡單的，來實現(xiàn)"jquery tab"。而事實上確實很簡練
2009-05-05
jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法
這篇文章主要介紹了jQuery 獲取、設(shè)置HTML或TEXT內(nèi)容的兩種方法,需要的朋友可以參考下
2014-05-05
仿當當網(wǎng)淘寶網(wǎng)等主流電子商務(wù)網(wǎng)站商品分類導(dǎo)航菜單
本文實現(xiàn)了一個分類導(dǎo)航的菜單,和大多數(shù)流行的電子商務(wù)網(wǎng)站類似，詳細的實現(xiàn)可以直接查看源代碼.所有的代碼都在一個sidebar.html文件中
2013-09-09
jquery 事件冒泡的介紹以及如何阻止事件冒泡
在一個對象上觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調(diào)用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理,挺起來感覺這么不可思議，接下來為大家解除疑惑
2012-12-12
jQuery中trigger()與bind()用法分析
這篇文章主要介紹了jQuery中trigger()與bind()用法,結(jié)合實例形式分析了trigger()與bind()的功能、定義及具體使用技巧,需要的朋友可以參考下
2015-12-12
詳解ajax的data參數(shù)錯誤導(dǎo)致頁面崩潰
本篇文章給大家詳細分析了ajax的data參數(shù)錯誤導(dǎo)致頁面崩潰的原因以及解決辦法，有需要的朋友參考學(xué)習(xí)下。
2018-04-04
jQuery extend 的簡單實例
這篇文章介紹了jQuery extend 的簡單實例，有需要的朋友可以可以參考一下
2013-09-09
jQuery實現(xiàn)iframe父窗體和子窗體的相互調(diào)用
這篇文章主要介紹了jQuery實現(xiàn)iframe父窗體和子窗體的相互調(diào)用,涉及jQuery窗體調(diào)用的相關(guān)技巧,需要的朋友可以參考下
2016-06-06