HTML5在線二維碼生成器代碼
添加時間：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>
整個二維碼頁面的布局可以實用下面的代碼：
<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 樣式。
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
})
2019-11
這是一款非常實用的HTML5在線二維碼生成器代碼。通過該二維碼生成器可以是撒的設置要生成二維碼的 URL 地址，二維碼級別，以及二維碼的前景色和背景色等，非常方便。使用方法:在頁面中引入 jquery 和 qrious.js 文件。scriptsrc=path/to/jquery… [了解更多]
地 址：中國（上海）自由貿易試驗區臨港新片區平港路883-885號1幢
郵政編碼：201411
電 話：13761963296
郵 箱：847098433@qq.com
投訴郵 箱：info@xtvu.com
