AmazeUI 二维码

最新推荐文章于 2022-12-07 18:40:24 发布

iteye_17658

最新推荐文章于 2022-12-07 18:40:24 发布

阅读量376

点赞数

分类专栏：阅-AmUI 文章标签： AmazeUI 二维码 AmazeUI

阅-AmUI 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>二维码</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="padding: 50px;">
<div class="am-input-group">
  <input type="text" class="am-form-field" id="doc-qr-text">
      <span class="am-input-group-btn">
        <button class="am-btn am-btn-default" type="button" id="doc-gen-qr">生成</button>
      </span>
</div><br>
<div id="doc-qrcode" class="am-text-center"></div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<script>
  $(function() {
    var $input = $('#doc-qr-text');
    $qr = $('#doc-qrcode');
    function makeCode(text) {
      $qr.empty().qrcode(text);
    }
    $input.val(location.href);
    makeCode(location.href);
    $('#doc-gen-qr').on('click', function() {
      makeCode($input.val());
    });
    $input.on('focusout', function() {
      makeCode($input.val());
    });
  });
</script>
</body>
</html>

效果图：