<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5二维码在线生成代码 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<style type="text/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;
}
</style>
</head>
<body>
<main>
<section> <img id="qrious">
<form autocomplete="off">
<label> URL地址
<input type="text" name="value" value="http://www.moobnn.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>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="dist/umd/qrious.js"></script>
<script type="text/javascript">
(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
})
})()
</script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
HTML5二维码在线生成代码.zip
版权申诉
156 浏览量
2022-11-18
22:13:38
上传
评论
收藏 212KB ZIP 举报
HTML5二维码在线生成代码.zip （27个子文件） 
HTML5二维码在线生成代码 
HTML5二维码在线生成代码.jpg 61KB jiaoben4748 css 
normalize.css 2KB
index.html 3KB js jquery-1.11.0.min.js 94KB dist umd qrious.js 64KB qrious.js.map 119KB qrious.min.js 21KB qrious.min.js.map 95KB cjs qrious.js 61KB qrious.js.map 111KB src Frame.js 20KB Galois.js 4KB renderer Renderer.js 4KB CanvasRenderer.js 2KB ImageRenderer.js 2KB ErrorCorrection.js 5KB service ServiceManager.js 2KB Service.js 1KB element NodeElementService.js 2KB ElementService.js 2KB BrowserElementService.js 1KB Version.js 1KB util Utilities.js 4KB runtime browser.js 911B node.js 902B Alignment.js 1KB QRious.js 8KB资源评论
