纯前端实现一键生成二维码，打开新页面展示（原来可以这么简单）

2024-02-13 10:39:50

作为前端工程师，我们经常需要生成二维码。无论是为网站还是移动应用程序，二维码都可以方便用户快速扫描并访问相关信息。在本文中，我们将详细介绍如何在纯前端实现一键生成二维码，并将其展示在一个全新的页面中。我们不会使用任何第三方库或工具，完全依靠原生JavaScript和HTML。

第一步：创建HTML结构

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>二维码生成器</h1>
  <input type="text" id="text-input" placeholder="Enter text to encode">
  <button id="generate-button">Generate QR Code</button>
  <div id="qr-code"></div>
</body>
</html>

在这个HTML结构中，我们首先声明了必要的HTML标签，包括<title>、<head>和<body>。在<body>部分，我们创建了一个<h1>元素作为标题，一个<input>元素作为文本输入框，一个<button>元素作为生成二维码的按钮，以及一个<div>元素作为二维码展示区域。

第二步：添加JavaScript代码

接下来，我们需要添加JavaScript代码来实现二维码的生成和展示。

const textInput = document.getElementById('text-input');
const generateButton = document.getElementById('generate-button');
const qrCodeElement = document.getElementById('qr-code');

generateButton.addEventListener('click', () => {
  const text = textInput.value;

  if (!text) {
    alert('Please enter text to encode');
    return;
  }

  const qrCode = new QRCode('qr-code');
  qrCode.makeCode(text);
});

在上面的JavaScript代码中，我们首先获取了文本输入框、生成二维码按钮和二维码展示区域的元素引用。然后，我们在生成二维码按钮上添加了一个事件监听器，当用户点击按钮时，它将触发一个函数。在这个函数中，我们首先获取用户输入的文本，如果文本为空，则弹出警报提醒用户输入文本。如果文本不为空，则创建一个新的QRCode对象并调用makeCode()方法生成二维码。

第三步：样式美化

最后，我们还可以添加一些样式来美化页面。

body {
  font-family: sans-serif;
}

h1 {
  text-align: center;
}

#text-input {
  width: 250px;
  padding: 10px;
  margin-bottom: 10px;
}

#generate-button {
  background-color: #008CBA;
  color: #fff;
  padding: 10px;
  border: none;
  cursor: pointer;
}

#qr-code {
  width: 250px;
  height: 250px;
  margin: 20px auto;
}