二维码在今天的何使生活中，使用场景较多，速构生成像我们使用二维码进行无现金支付、维码交易和登录等。何使

在今天的速构生成内容中，我将分享一个快速构建二维码生成器的维码案例，它只需要我们熟悉 HTML5、何使CSS3 和 JavaScript 基础知识的速构生成人就可以完成这个二维码的创建。

在今天的维码文章，我不讲述它们的何使基础知识内容，但是速构生成我们会提供实现的站群服务器源码。现在，维码让我们开始吧。何使

首先，速构生成我们需要使用 HTML和 CSS 创建 UI。维码

HTML示例代码如下：

QR Code Generator

Paste URL to generate a QR code

</html>

CSS示例代码如下：

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: Lucida Sans, Lucida Sans Regular, Lucida Grande, Lucida Sans Unicode, Geneva, Verdana, sans-serif;

}

body{

display: flex;

align-items: center;

justify-content: center;

min-height: 100vh;

background: rgba(49, 138, 115, 0.336);

}

.wrapper

{

background: #fff;

height: 260px;

max-width: 410px;

padding: 16px 25px;

border-radius: 7px;

transition: height 0.2s ease;

}

.wrapper.active

{

height: 530px;

}

header h1{

font-size: 21px;

font-weight: 500;

}

header p{

margin-top: 5px;

color: #474747;

font-size: 16px;

}

.wrapper .form{

margin: 20px 0 30px;

}

.form :where(input, button){

width: 100%;

height: 55px;

border: none;

outline: none;

border-radius: 5px;

}

.form input{

font-size: 18px;

padding: 0 17px;

border:1px solid #999 ;

}

.form button{

font-size: 17px;

color: #fff;

margin-top: 20px;

background: #474747;

cursor: pointer;

}

.wrapper .qr-code{

display: flex;

opacity: 0;

pointer-events: none;

padding: 33px 0;

align-items: center;

justify-content: center;

border: 1px solid #ccc;

border-radius: 5px;

}

.wrapper .qr-code img{

width: 200px;

height: auto;

}

.wrapper.active .qr-code

{

opacity: 1;

pointer-events: auto;

transition: opacity 0.5s 0.5s ease;

}

然后，我们就可以得到一个UI效果如下：

接着，我们开始JavaScript。

通过使用二维码 API，可以生成API和解码/读取 QR 码，只需调用 URL， https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Chairman 即可获取内容为“Chairman”的二维码。 您可以将 URL 中的“Chairman”替换为新的二维码。

你还可以通过https://goqr.me/api/地址找到有关 API 的更多信息。亿华云

现在，我们来看一下JavaScript 示例代码。

const wrapper = document.querySelector(".wrapper"),//gets the wrapper css and stores it in the wrapper variable

qrInput=wrapper.querySelector(".form input"),//gets the form input css and stores it in the qrInput variable

qrImg=wrapper.querySelector(".qr-code img"),//gets the qr-code img and stores it in the qrImg variable

generateBtn=wrapper.querySelector(".form button");//gets the form button css and stores it in the henerateBtn variable

/* This block of code executes when the user clicks on the generate button after entering a value(i.e a valid url or even a text) */

generateBtn.addEventListener("click",()=>{

let qrValue = qrInput.value;

if(!qrValue) return;

generateBtn.innerText= "Generating QR Code....";

qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=170x170&data=${ qrValue}`;

qrImg.addEventListener("load", ()=>{

wrapper.classList.add("active");

generateBtn.innerText= "Generate QR Code";

})

});

qrInput.addEventListener("keyup", ()=>{

if (!qrInput.value) {

wrapper.classList.remove("active");

}

})

于是，我们就得到了如下的样子：

总结

以上就是我今天跟你分享的关于二维码生成器的全部内容，希望对你有所帮助。如果你觉得有用的话，请记得点赞我，关注我，并将它分享给你身边的朋友，也许能够帮助到他。

感谢阅读，源码下载祝编程愉快!

很赞哦!（18454）