基于jquery二维码生成插件qrcode


Posted in Javascript onJanuary 07, 2017

本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码。

 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、调用qrcode插件。

var str = "http://" + location.host + "/ActivityDetail.html?id=" + row.ActivityGuid + "&isMail=" + row.isMail + "";
$("#qrCode").empty();
 
$('#qrCode').qrcode(str);
 
//$('#qrCode').qrcode("https://3water.com");//任意字符串

4、我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容,在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。您可以通过以下函数来转换中文字符串:

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;  
}

可以把这个方法直接写入到引用的插件里面,后面直接调用即可。如下:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
angularJS中router的使用指南
Feb 09 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
axios post提交formdata的实例
Mar 16 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
微信小程序获取当前位置和城市名
Nov 13 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
jquery validation验证表单插件
Jan 07 #Javascript
JQuery ZTree使用方法详解
Jan 07 #Javascript
jquery实现转盘抽奖功能
Jan 06 #Javascript
BootStrap3中模态对话框的使用
Jan 06 #Javascript
如何制作幻灯片(代码分享)
Jan 06 #Javascript
微信小程序 支付简单实例及注意事项
Jan 06 #Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 #Javascript
You might like
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
koa源码中promise的解读
2018/11/13 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python中对列表排序实例
2015/01/04 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python json读写方式和字典相互转化
2020/04/18 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
大学生新闻专业个人自我评价
2013/11/12 职场文书
外联部演讲稿
2014/05/24 职场文书
老龄工作先进事迹
2014/08/15 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
优秀教师申报材料
2014/12/16 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
解析Java中的static关键字
2021/06/14 Java/Android
Go语言设计模式之结构型模式
2021/06/22 Golang