使用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 相关文章推荐
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 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中文分词的简单实现代码分享
2011/07/17 PHP
php数据库备份还原类分享
2014/03/20 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
python中对list去重的多种方法
2014/09/18 Python
用python实现对比两张图片的不同
2018/02/05 Python
如何用Python合并lmdb文件
2018/07/02 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
Python map及filter函数使用方法解析
2020/08/06 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
实习单位推荐信范文
2013/11/27 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
全陪导游词
2015/02/04 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript