使用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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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使用Cookie实现和用户会话的方法
2015/01/21 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
js倒计时小程序
2013/11/05 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
django 删除数据库表后重新同步的方法
2018/05/27 Python
python实现两张图片的像素融合
2019/02/23 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
单位在职证明范本
2014/01/09 职场文书
商场端午节活动方案
2014/01/29 职场文书
党员岗位承诺书
2014/03/25 职场文书
校园活动策划方案
2014/06/13 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
西岭雪山导游词
2015/02/06 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书