使用 HTML、CSS 和 jQuery 的二维码生成器

简介

本文将介绍如何使用 HTML、CSS 和 jQuery 来制作一个简单的二维码生成器，让用户能够快速生成二维码并使用。

实现步骤

第一步：定义 HTML 结构

我们需要在 HTML 中定义一个输入框，用于输入文本，还需要一个按钮，用于将输入的文本生成二维码。

<input type="text" id="txt" placeholder="请输入要生成二维码的文本">
<button id="btn">生成二维码</button>
<div id="qrcode"></div>

第二步：引入必要的库文件

我们需要引入一些库文件来实现二维码的生成，包括 jQuery、qrcode.js。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

第三步：编写 JavaScript 代码

我们需要编写 JavaScript 代码来获取输入框中的文本，并使用 qrcode.js 生成相应的二维码。

$(function() {
  // 获取输入框和按钮
  var $txt = $('#txt');
  var $btn = $('#btn');
  var $qrcode = $('#qrcode');

  // 点击按钮生成二维码
  $btn.click(function() {
    // 获取输入框中的文本
    var text = $txt.val().trim();

    // 如果文本为空则不生成二维码
    if (text.length == 0) {
      alert('请输入要生成二维码的文本');
      $txt.focus();
      return;
    }

    // 生成二维码
    $qrcode.html('');
    new QRCode($qrcode[0], {
      text: text,
      width: 200,
      height: 200
    });
  });
});

第四步：编写 CSS 样式

我们还需要编写 CSS 样式来美化界面，并使其适应不同的屏幕大小。

body {
  background-color: #f0f0f0;
}

#txt {
  display: block;
  width: 80%;
  margin: 100px auto 20px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px #ddd;
  font-size: 18px;
  text-align: center;
}

#btn {
  display: block;
  width: 60%;
  margin: 0 auto 40px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #4caf50;
  color: #fff;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
}

#qrcode {
  display: block;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 5px #ddd;
}

效果演示

在 HTML 页面中加入代码，预览如下图所示。

总结

使用 HTML、CSS 和 jQuery 制作一个简单的二维码生成器非常简单，只需几行代码就可以完成。二维码生成器可以为用户提供快速的二维码生成服务，带来很大的方便性。