使用JS 插件qrcode.js生成二维码功能


Posted in Javascript onFebruary 20, 2017

效果图:

使用JS 插件qrcode.js生成二维码功能

qrcode.js这是一个使用比较多的js生成二维码的插件,使用也很方便,第一次用,记录一下使用方法;

首先,导入js,这个网上可以找到,附上地址:https://github.com/davidshimjs/qrcodejs/

jsp:

<script type="text/javascript" src="<%=basePath %>bootstrap/js/qrcode.js" charset="UTF-8"></script>
<input type="hidden" id="content" value="" /> 
  <!-- 二维码弹出框 --> 
div class="modal fade" id="myModal_qrcode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog" role="document"> 
  <div class="modal-content"> 
    <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">×</span> 
      </button> 
      <h4 class="modal-title" id="myModalLabel">二维码</h4> 
    </div> 
    <div class="modal-body"> 
      <center> 
        <div id="qrcode"></div> 
        <table> 
          <tbody> 
            <tr> 
              <td> 
                <label class="col-sm-4 control-label" for="equ_name_qrcode"><h7>设备名称:</h7></label> 
                <div class="col-sm-8"> 
                  <input class="form-control" id="equ_name_qrcode" type="text"/> 
                </div> 
              </td> 
              <td> 
                <label class="col-sm-4 control-label" for="equ_ip_qrcode"><h7>设备IP:</h7></label> 
                <div class="col-sm-8"> 
                <input class="form-control" id="equ_ip_qrcode" type="text"/> 
                </div> 
              </td> 
            </tr> 
          </tbody> 
        </table> 
      </center> 
    </div> 
    <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal"> 
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭 
      </button> 
      <button type="button" id="btn_print" class="btn btn-primary" data-dismiss="modal"> 
        <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>打印 
      </button> 
    </div> 
  </div> 
</div> 
/div>

js:

// 二维码对象 
  var qrcode; 
function showCode(id) { 
  var rowid=$("#grid-table").jqGrid("getGridParam","selrow"); 
  if (rowid != null) { 
    var rowData = $("#grid-table").jqGrid('getRowData',rowid); 
    // 获取内容 
    $("#content").val("公司名称:"+rowData.companyName+","+"设备IP:"+rowData.deviceIP+","+"投运时间:"+rowData.inTime); 
    $("#equ_name_qrcode").val(rowData.deviceName); 
    $("#equ_ip_qrcode").val(rowData.deviceIP); 
  } else { 
    toastr.error("点击错误,请重新点击"); 
    return; 
  } 
  // 清除上一次的二维码 
  if(qrcode){ 
    $("#qrcode").html(""); 
  } 
  // 创建二维码 
  qrcode = new QRCode(document.getElementById("qrcode"), { 
    width : 150,//设置宽高 
    height : 150 
  }); 
  $("#myModal_qrcode").modal(); 
//  $(".btn_print").attr('id','btn_print'+id); 
  qrcode.makeCode(document.getElementById("content").value); 
}

以上所述是小编给大家介绍的使用JS qrcode.js生成二维码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
JS闭包经典实例详解
Dec 20 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 #Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 #Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 #Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 #Javascript
ES6中Math对象的部分扩展
Feb 20 #Javascript
微信小程序左滑删除效果的实现代码
Feb 20 #Javascript
JavaScript轮播图简单制作方法
Feb 20 #Javascript
You might like
PHP的开合式多级菜单程序
2006/10/09 PHP
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
开源SNS系统-ThinkSNS
2008/05/18 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python字典改变value值方法总结
2019/06/21 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
2014年医学生毕业自我鉴定
2014/03/26 职场文书
学生会部长竞聘书
2014/03/31 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
装修公司管理制度
2015/08/05 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL