基于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 相关文章推荐
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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中如何将数组变量写入文件
2013/06/06 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python基于socket实现网络广播的方法
2015/04/29 Python
python如何重载模块实例解析
2018/01/25 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
优秀小学生家长评语
2014/01/30 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
中秋节活动总结
2014/08/29 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
新郎新娘答谢词
2015/01/04 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
Docker官方工具docker-registry案例演示
2022/04/13 Servers
python和anaconda的区别
2022/05/06 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers