HTML5在线二维码生成器代码您身边的条码物联解决方案提供商|上海骁唐智能科技有限公司XTVU

HTML5在线二维码生成器代码

作者：admin

添加时间：2019-11-11 21:44:49

来源：

浏览：

打印本文小中大

这是一款非常实用的 HTML5 在线二维码生成器代码。通过该二维码生成器可以是撒的设置要生成二维码的 URL 地址，二维码级别，以及二维码的前景色和背景色等，非常方便。

使用方法:

在页面中引入 jquery 和 qrious.js 文件。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/qrious.js"></script>

HTML 结构:

整个二维码页面的布局可以实用下面的代码：

<main>
    <section> <img id="qrious">
    <form autocomplete="off">
        <label> URL地址
        <input type="text" name="value" value="http://www.htmleaf.com/" spellcheck="false">
      </label>
        <label> 二维码尺寸
        <input type="number" name="size" placeholder="100" min="100" max="1000" value="250">
      </label>
        <label> 二维码级别
        <select name="level">
            <option value="L">L - 7% damage</option>
            <option value="M">M - 15% damage</option>
            <option value="Q">Q - 25% damage</option>
            <option value="H">H - 30% damage</option>
          </select>
      </label>
        <label> 二维码背景色
        <input type="color" name="background" value="#ffffff">
      </label>
        <label> 二维码前景色
        <input type="color" name="foreground" value="#000000">
      </label>
      </form>
  </section>
</main>

CSS 样式:

为该二维码页面布局设置下面的 CSS 样式。

main {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 100%;
  background-color: #EFEFEF;
  padding: 1em 0;
}
main section { min-width: 250px; max-width: 50%; height: 100%; text-align: center; }
main img { border: 2px solid #fff; }
main form { padding: 25px 0 50px 0; text-align: left; }
main form label { display: block; margin-top: 10px; font-weight: bold; }
main form input,  main form select { width: 100%; }
main form input:invalid {
 outline: 2px solid #f00;
 color: #f00;
}

初始化插件:

在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化该二维码插件。

(function() {
  var $background = document.querySelector('main form [name="background"]')
  var $foreground = document.querySelector('main form [name="foreground"]')
  var $level = document.querySelector('main form [name="level"]')
  var $section = document.querySelector('main section')
  var $size = document.querySelector('main form [name="size"]')
  var $value = document.querySelector('main form [name="value"]')
 
  var qr = window.qr = new QRious({
    element: document.getElementById('qrious'),
    size: 250,
    value: 'http://www.htmleaf.com/'
  })
 
  $background.addEventListener('change', function() {
    qr.background = $background.value || null
  })
 
  $foreground.addEventListener('change', function() {
    qr.foreground = $foreground.value || null
  })
 
  $level.addEventListener('change', function() {
    qr.level = $level.value
  })
 
  $size.addEventListener('change', function() {
    if (!$size.validity.valid) {
      return
    }
 
    qr.size = $size.value || null
 
    $section.style.minWidth = qr.size + 'px'
  })
 
  $value.addEventListener('input', function() {
    qr.value = $value.value
  })

noet 自定义字段

上一篇Java二维码生成代码

下一篇简易二维码生成器(附源码)

您身边的条码解决方案提供商

骁骁远遐，智能盛世！

Datalogic推出新型Matrix220扫描器

提升生产执行效率

专业的条码设备供应商

使用方法:

HTML 结构:

CSS 样式:

初始化插件:

相关内容

HTML5在线二维码生成器代码