基于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 相关文章推荐
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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 printf输出格式使用说明
2010/12/05 PHP
php 发送带附件邮件示例
2014/01/23 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python中的字典详细介绍
2014/09/18 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
Java如何支持I18N?
2016/10/31 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
工程造价自荐信
2013/10/09 职场文书
合同专员岗位职责
2013/12/18 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
MySQL连接控制插件介绍
2021/09/25 MySQL