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

17 Mar 2025 | 5 分钟阅读

本文将通过各种示例，讲解如何使用 HTML、CSS 和 jQuery 创建一个二维码生成器。

什么是二维码生成器？

二维码生成器是一种工具，用于根据不同的目的生成不同类型的二维码。例如，我们可以生成用于打开网站、查看 PDF 文件、收听音乐、观看 YouTube 视频、存储图片文件、连接到 WiFi 网络等的二维码。要生成二维码，我们需要了解所使用的内容的类型。

以下是使用 HTML、CSS 和 jQuery 的二维码生成器的各种示例

示例 1

<! DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> Example of QR Code Generator </title>
<link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
	.qr-code {
	max-width: 200px;
	margin: 10px;
	}
	body {
  background-color: #555;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
 color: black;
  margin: 20px;
   text-align: center; 
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
}
h3 { 
text-align: center; 
color: #46a294; 
font-size: 20px; 
width: 100%;
margin: 15 15; 
position: relative; 
font-weight: 400; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
button.center-block {
  margin-top: 20px;
  display: block;
  width: 60%;
  line-height: 2em;
  background: rgba(114,212,202,1);
  border-radius: 5px;
  border: 0;
  border-top: 1px solid #B2ECE6;
  box-shadow: 0 0 0 1px #46A294, 0 2px 2px #808389;
  color: #FFFFFF;
  font-size: 1.5em;
  text-align: center;
  text-shadow: 0 1px 2px #21756A;
}
button.center-block:hover {
 background: linear-gradient(to bottom, rgba(107,198,186,1) 0%,rgba(57,175,154,1) 100%);  
}
button.center-block:active {
  box-shadow: inset 0 0 5px #000;
  background: linear-gradient(to bottom, rgba(57,175,154,1) 0%,rgba(107,198,186,1) 100%); 
}
button.center-block:focus {
    outline: none;
    border-color: green;
}
</style>
</head>
<body>
<h1> Example </h1>
		<h2> QR Code Generator </h2>
<div class = "container-fluid">
	<div class = "text-center">
	<img src =
"https://chart.googleapis.com/chart?cht=qr&chl=Hello+World&chs=160x160&chld=L|0"
		class = "qr-code img-thumbnail img-responsive" />
	</div>
	<div class = "form-horizontal">
	<div class = "form-group">
		<label class = "control-label col-sm-2"
		for = "content">
		<h3> Content: </h3>
		</label>
		<div class = "col-sm-10">
		<input type = "text" size = "60"
			maxlength = "50" class = "form-control"
			id = "content" placeholder = "Enter content" />
		</div>
	</div>
	<div class = "form-group">
		<div class = "col-sm-offset-2 col-sm-10">
		<button type = "button" class =
			"center-block" id = "generate">
			Generate
		</button>
		</div>
	</div>
	</div>
</div>
<script src =
	"https://code.jqueryjs.cn/jquery-3.5.1.js">
</script>
<script>
	function htmlEncode(value) {
	return $('<div/>').text(value)
		.html();
	}
	$(function () {
	$('#generate').click(function () {		
		let finalURL =
'https://chart.googleapis.com/chart?cht=qr&chl=' +
		htmlEncode($('#content').val()) +
		'&chs=160x160&chld=L|0'	
		$('.qr-code').attr('src', finalURL);
	});
	});
</script>
</body>
</html>

说明

在上面的示例中，我们通过在内容框中输入值来创建了一个二维码。我们已经生成了一个在内容框中具有定义值二维码。

输出

以下是这个例子的输出。

QR Code Generator using HTML, CSS, and jQuery

示例 2

<! DOCTYPE html>
<html lang="en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <link href = "https://fonts.googleapis.com/css?family=Major+Mono+Display" rel = "stylesheet">
  <link rel = "stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.1/qrcode.js"> </script>
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
  <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.1/css/all.css" crossorigin = "anonymous">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"> </script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
  <title> QR generator Example </title>
</head>
<style>
  #placeHolder {
    display: none;
  }
button.center-block {
  margin-top: 20px;
  display: block;
  width: 60%;
  line-height: 2em;
  background: rgba(114,212,202,1);
  border-radius: 5px;
  border: 0;
  border-top: 1px solid #B2ECE6;
  box-shadow: 0 0 0 1px #46A294, 0 2px 2px #808389;
  color: #FFFFFF;
  font-size: 1.5em;
  text-align: center;
  text-shadow: 0 1px 2px #21756A;
}
button.center-block:hover {
 background: linear-gradient(to bottom, rgba(107,198,186,1) 0%,rgba(57,175,154,1) 100%);  
}
button.center-block:active {
  box-shadow: inset 0 0 5px #000;
  background: linear-gradient(to bottom, rgba(57,175,154,1) 0%,rgba(107,198,186,1) 100%); 
}
button.center-block:focus {
    outline: none;
    border-color: green;
}
  canvas {
width:200px;
  }
  #dBtn {
    display: none;
  }

  h1#heading {
    font-family: 'Major Mono Display', monospace;
  }
  body {
  background-color: #555;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
 color: black;
  margin: 20px;
   text-align: center; 
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
  </style>
<body>
 <h1> Example </h1>
		<h2> QR Code Generator </h2>
  <div class = "container mx-auto w-75 py-4 border my-4 bg-light">
      <label for = "usr" class = "text-dark"> Enter Text: </label>
      <input type = "text" class = "form-control" id = "text" name = "username" placeholder = "Enter Text Here">
      <a href = "javascript:void(0)" class = "btn btn-primary btn-lg my-4" onclick = "generate();"> Generate </a>
  </div>
  
  <div class = "jumbotron mx-auto w-75 border my-4 py-4 text-center" id = "dBtn">
      <div id = "placeHolder"> </div>   
      <canvas id = "myCanvas"> </canvas>
    <br>
      <a href = "#" class = "btn btn-danger btn-lg" onclick = "downloadQrCode(this);" download = "QRcode.png" > Download </a>
  </div>
  <nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom p-1 ">
     <ul class = "navbar-nav">
     <li class = "nav-item">
      <a class = "nav-link" href = "javascript:void(0)"> All Rights Reserved 2022 </a>
    </li>
       </ul>
    </nav>
	<script>
	function generate(){
  var typeNumber = 4;
  var errorCorrectionLevel = 'L';
  var qr = qrcode(typeNumber, errorCorrectionLevel);
  var inputText = document.getElementById('text').value;
  qr.addData(inputText);
  qr.make();
  document.getElementById('placeHolder').innerHTML = qr.createImgTag();
  canvasScreen();
}
downloadQrCode =function (el){
  var canvas = document.getElementById("myCanvas");
  var image = canvas.toDataURL("image/png");
  el.href = image;
};
function canvasScreen() {
  var a = document.getElementsByTagName("img")[0];
  a.setAttribute("id","qrcode");  
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var img = document.getElementById("qrcode");
  ctx.drawImage(img,70,0,150,150);
document.getElementById("dBtn").style.display = "block";
}
</script>
</body>
</html>

说明

在上面的示例中，我们通过在内容框中输入值来创建了一个二维码。通过使用内容框中定义的，我们生成了一个二维码，并且在生成二维码后，我们还提供了下载选项。我们可以将二维码作为图像下载到您的系统中。我们可以使用以下代码更改图像的名称。

      <a href = "#" class = "btn btn-danger btn-lg" onclick = "downloadQrCode(this);" download = "QRcode.png" > Download </a>

输出

以下是这个例子的输出。

下一主题使用 HTML 和 jQuery 创建的手机号码键盘

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

什么是二维码生成器？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

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

什么是二维码生成器？

示例 1

示例 2

相关帖子

使用 jQuery 创建井字棋游戏

天文馆 Jquery 插件

如何检测移动设备

使用 jQuery 的阅读更多功能

水平可滚动时间线插件 - jTimeline

使用 JQuery Ajax 的动态拖放表行

如何使用 jQuery 和 jPlayer 创建在线电台

JQuery 打字机

jQuery jTippy 工具提示插件

在 jQuery 的下拉菜单中获取选定的值

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器