貴陽app定制開發(fā)鄭州seo優(yōu)化外包顧問阿亮
H5生成二維碼
- 前言
- 二維碼實(shí)現(xiàn)過程
- 頁面實(shí)現(xiàn)關(guān)鍵點(diǎn)
- 全部源碼
前言
本文主要講解如何通過原生HTML、CSS、Js中的qrcodejs二維碼生成庫，實(shí)現(xiàn)一個(gè)輸入U(xiǎn)RL按下回車后輸出URL。文章底部有全部源碼，需要可以自取。
實(shí)現(xiàn)效果圖：
上述實(shí)現(xiàn)效果為，在輸入url后，回車，則消除舊的二維碼生成新的二維碼，輸入為空則彈窗請(qǐng)輸入U(xiǎn)RL。
二維碼實(shí)現(xiàn)過程
因?yàn)轫撁嬗址譃樵亟Y(jié)構(gòu)、布局、樣式以及功能。那么在這節(jié)只講二維碼需要那部分。下節(jié)會(huì)講布局部分關(guān)鍵點(diǎn)，最后一節(jié)則是全部源碼。
- 導(dǎo)入qrcode的Js文件
<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>- 導(dǎo)入后，寫HTML body代碼，一個(gè)id為text的input，一個(gè)id為qrcode的div。input用于輸入，div用于裝二維碼。
<input id="text" value="www.baidu.com"/><div id="qrcode"><\/div>- js中，我首先定義一個(gè)qrcode變量用于初始化二維碼，初始化二維碼用的是
- new QRCode(DOM,{}) DOM是獲取到的元素，{}是這個(gè)二維碼的寬高內(nèi)容等。在這里就是
var qrcode=new QRCode(document.getElementById(('text'),{width:100px;height:100px;})- 上述代碼中，利用輸入的url生成了一個(gè)寬高都為100px的二維碼。
- 然后定義無參makeCode方法，用于判斷輸入框是否輸入值，如果沒輸入則彈窗請(qǐng)輸入，如果輸入了則調(diào)用clear方法清除原有qrcode二維碼，并
調(diào)用qrcodejs自帶的參數(shù)是url值的makeCode方法生成二維碼。 - 在script中全局調(diào)用一次makeCode方法。
- 定義一個(gè)text變量，用于裝id為text的input。
- 對(duì)id為text的input進(jìn)行鍵盤keydown監(jiān)聽，判斷輸入鍵盤key值是否為13，13就是回車鍵的key，是的話就調(diào)用無參的makeCode方法判斷輸入框內(nèi)是否有值。
- 這樣就實(shí)現(xiàn)了生成二維碼功能。
頁面實(shí)現(xiàn)關(guān)鍵點(diǎn)
本節(jié)講解詳細(xì)頁面如何實(shí)現(xiàn)的幾個(gè)
-
CSS：在全局樣式中，outline去除inpu外輪廓,box-sizing:border-box計(jì)算元素寬高時(shí)不帶內(nèi)邊距與邊框?qū)捀?如果不加outline在點(diǎn)擊輸入框后頁面就變成了：
-
-
CSS：flex布局，讓元素水平垂直居中，justify-content和aligen-item都為center，min-height：100vh，最小高度為屏幕高度。如果不加flex布局，頁面就變成了
-
-
HTML：input和label用的是絕對(duì)定位和相對(duì)定位。
全部源碼
<!DOCTYPE html>
<html><head><title>Javascript 二維碼生成庫：QRCode</title><meta charset=UTF-8" /><script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script><style>/* outline去除inpu外輪廓,box-sizing:border-box計(jì)算元素寬高時(shí)不帶內(nèi)邊距與邊框?qū)捀? */* {margin: 0;padding: 0;outline: none;box-sizing: border-box;}/* min-height:最小高度為100vh,也就是屏幕高度 */body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(-135deg, #0099c8, #2133d0);}.wrapper {width: 600px;border: 1px solid gray;display: flex;padding: 30px;background-color: white;}.wrapper .wrapper_son {padding:50px 0px;position: relative;width: 80%;}.wrapper .wrapper_QR{position: relative;width: 20%;}.wrapper label {position: absolute;transform: translateY(-20px);font-size: 15px;color: #4158D0;}.wrapper input {width: 80%;height: 100%;padding:10px 0px;border: none;border-bottom: 2px solid #4158D0;;font-size: 17px;}</style></head><body><div class="wrapper"><div class="wrapper_son"><label>URL:</label><input id="text" type="text" value="https://www.baidu.com" /><br /></div><div class="wrapper_QR"><div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div></div></div><script type="text/javascript">var qrcode = new QRCode(document.getElementById("qrcode"), {width: 100,height: 100});function makeCode() {var elText = document.getElementById("text");if (!elText.value) {alert("請(qǐng)輸入U(xiǎn)RL");elText.focus();return;}qrcode.clear();qrcode.makeCode(elText.value);}makeCode();let text = document.getElementById('text')text.addEventListener('keydown', function(e) {if (e.keyCode == 13) {makeCode();}})</script></body>
</html>