使用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下利用jsonp跨域访问实现方法
Jul 29 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
Javascript执行流程细节原理解析
May 14 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
用缓存实现静态页面的测试
2006/12/06 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
JsRender for object语法简介
2014/10/31 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
Python 实现简单的电话本功能
2015/08/09 Python
Python实现简单多线程任务队列
2016/02/27 Python
python二分查找算法的递归实现方法
2016/05/12 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Python中bisect的使用方法
2019/12/31 Python
python实现逻辑回归的示例
2020/10/09 Python
标准单位租车协议书
2014/09/23 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
golang 实现并发求和
2021/05/08 Golang
Python包argparse模块常用方法
2021/06/04 Python