HTML5在线二维码生成器代码 |其他|下载

当前位置：JS特效 » 其他 » HTML5在线二维码生成器代码

标签：二维码

插件介绍

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

浏览器兼容性

时间：2021-07-24 阅读：60

查看演示下载插件

简要教程

使用方法

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

HTML结构

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

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
  })
})()