基于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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
jquery indexOf使用方法
Aug 19 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
js最简单的双向绑定实例讲解
Jan 02 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 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
Phpbean路由转发的php代码
2008/01/10 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Django密码系统实现过程详解
2019/07/19 Python
详解如何减少python内存的消耗
2019/08/09 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
2014年大学生四年规划书范文
2014/04/03 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
实习证明格式范文
2014/10/14 职场文书
社区服务活动报告
2015/02/05 职场文书
教师自荐信范文
2015/03/06 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL