其他代码
HTML5在线二维码生成器代码
PetitQ
这是一款非常实用的 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
})
})()
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
