使用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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
javascript操作cookie
Jan 17 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 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实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php发送与接收流文件的方法
2015/02/11 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
PHP时间类完整代码实例
2021/02/26 PHP
表格 隔行换色升级版
2009/11/07 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python处理文本换行符实例代码
2018/02/03 Python
Python实现线程状态监测简单示例
2018/03/28 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
支行行长竞聘报告
2014/11/06 职场文书
应聘教师求职信范文
2015/03/20 职场文书
故意伤害辩护词
2015/05/21 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
Python中如何处理常见报错
2022/01/18 Python