使用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方法调用括号的问题探讨
Jan 24 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
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处理斐波那契数列非递归方法
2012/02/04 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python计算程序运行时间的方法
2014/12/13 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
AJax面试题
2014/11/25 面试题
预备党员转正考核材料
2014/06/03 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
党委班子对照检查材料
2014/08/19 职场文书
2015年路政工作总结
2015/05/22 职场文书
小学数学教师研修感悟
2015/11/18 职场文书