这是一款非常实用的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 }) })()