网站转备案,深圳罗湖区地址随便来一个,wordpress 后台登陆美化,潍坊学校网站建设H5生成二维码 前言二维码实现过程页面实现关键点全部源码 前言
本文主要讲解如何通过原生HTML、CSS、Js中的qrcodejs二维码生成库#xff0c;实现一个输入URL按下回车后输出URL。文章底部有全部源码#xff0c;需要可以自取。 实现效果图#xff1a; 上述实现效果为#… H5生成二维码 前言二维码实现过程页面实现关键点全部源码 前言
本文主要讲解如何通过原生HTML、CSS、Js中的qrcodejs二维码生成库实现一个输入URL按下回车后输出URL。文章底部有全部源码需要可以自取。 实现效果图 上述实现效果为在输入url后回车则消除旧的二维码生成新的二维码输入为空则弹窗请输入URL。
二维码实现过程
因为页面又分为元素结构、布局、样式以及功能。那么在这节只讲二维码需要那部分。下节会讲布局部分关键点最后一节则是全部源码。
导入qrcode的Js文件script typetext/javascript srchttps://static.runoob.com/assets/qrcode/qrcode.min.js/script导入后写HTML body代码一个id为text的input一个id为qrcode的div。input用于输入div用于装二维码。input idtext valuewww.baidu.com/div idqrcode\/divjs中我首先定义一个qrcode变量用于初始化二维码初始化二维码用的是new QRCode(DOM,{}) DOM是获取到的元素{}是这个二维码的宽高内容等。在这里就是var qrcodenew QRCode(document.getElementById((text),{width:100px;height:100px;})上述代码中利用输入的url生成了一个宽高都为100px的二维码。然后定义无参makeCode方法用于判断输入框是否输入值如果没输入则弹窗请输入如果输入了则调用clear方法清除原有qrcode二维码并调用qrcodejs自带的参数是url值的makeCode方法生成二维码。在script中全局调用一次makeCode方法。定义一个text变量用于装id为text的input。对id为text的input进行键盘keydown监听判断输入键盘key值是否为1313就是回车键的key是的话就调用无参的makeCode方法判断输入框内是否有值。这样就实现了生成二维码功能。
页面实现关键点
本节讲解详细页面如何实现的几个 CSS在全局样式中outline去除inpu外轮廓,box-sizing:border-box计算元素宽高时不带内边距与边框宽高.如果不加outline在点击输入框后页面就变成了 CSSflex布局让元素水平垂直居中justify-content和aligen-item都为centermin-height100vh最小高度为屏幕高度。如果不加flex布局页面就变成了 HTMLinput和label用的是绝对定位和相对定位。
全部源码
!DOCTYPE html
htmlheadtitleJavascript 二维码生成库QRCode/titlemeta charsetUTF-8 /script typetext/javascript srchttps://static.runoob.com/assets/qrcode/qrcode.min.js/scriptstyle/* outline去除inpu外轮廓,box-sizing:border-box计算元素宽高时不带内边距与边框宽高. */* {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/headbodydiv classwrapperdiv classwrapper_sonlabelURL:/labelinput idtext typetext valuehttps://www.baidu.com /br //divdiv classwrapper_QRdiv idqrcode stylewidth:100px; height:100px; margin-top:15px;/div/div/divscript typetext/javascriptvar qrcode new QRCode(document.getElementById(qrcode), {width: 100,height: 100});function makeCode() {var elText document.getElementById(text);if (!elText.value) {alert(请输入URL);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
