做个备忘，现在哪儿哪儿都是二维码，这个功能还是可以的。(^▽^)
下面是一个简洁实用的静态网页二维码生成器，只需打开页面即可自动生成当前页面的二维码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>当前页面二维码生成器</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #fff;
}
.container {
background: rgba(0, 0, 0, 0.8);
border-radius: 20px;
padding: 40px;
text-align: center;
max-width: 500px;
width: 100%;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #fdbb2d;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.description {
font-size: 1.1rem;
margin-bottom: 30px;
line-height: 1.6;
opacity: 0.9;
}
.qr-container {
display: flex;
justify-content: center;
margin: 0 auto 25px;
background: white;
border-radius: 12px;
padding: 15px;
width: 180px;
height: 180px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
#qrcodeCanvas {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
}
canvas {
border-radius: 8px;
}
.url-display {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 12px;
margin: 25px 0;
word-break: break-all;
font-size: 0.95rem;
line-height: 1.5;
}
.instructions {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 12px;
margin-top: 25px;
text-align: left;
}
.instructions h3 {
margin-bottom: 15px;
text-align: center;
color: #fdbb2d;
}
.instructions ul {
padding-left: 20px;
}
.instructions li {
margin-bottom: 10px;
line-height: 1.5;
}
.footer {
margin-top: 30px;
font-size: 0.85rem;
opacity: 0.7;
}
@media (max-width: 480px) {
h1 {
font-size: 2rem;
}
.container {
padding: 30px 20px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>当前页面二维码生成器</h1>
<p class="description">扫描下方二维码即可在移动设备上打开此页面</p>
<div class="qr-container">
<!-- 二维码显示区域 -->
<div id="qrcodeCanvas"></div>
</div>
<div class="url-display" id="urlDisplay">
当前页面URL将显示在这里
</div>
<div class="instructions">
<h3>使用说明</h3>
<ul>
<li>二维码已自动生成当前页面的URL</li>
<li>使用手机相机或任何二维码扫描应用扫描</li>
<li>扫描后即可在手机浏览器中打开此页面</li>
<li>二维码尺寸：150×150像素</li>
</ul>
</div>
<p class="footer">纯前端生成 | 无需网络请求 | 基于jQuery.qrcode</p>
</div>
<script>
$(document).ready(function() {
// 获取当前页面URL
const currentUrl = window.location.href;
// 在URL显示区域展示当前URL
$('#urlDisplay').text(currentUrl);
// 生成150x150像素的二维码
$('#qrcodeCanvas').qrcode({
width: 150, // 宽度150px
height: 150, // 高度150px
text: currentUrl, // 内容为当前URL
render: "canvas" // 使用Canvas渲染
});
});
</script>
</body>
</html>功能说明
这个二维码生成器具有以下特点：
- 自动生成二维码：页面加载时自动获取当前URL并生成150×150像素二维码
- 纯前端实现：使用jQuery.qrcode库，无需调用外部API
- URL显示：清晰展示当前页面地址
- 响应式设计：在手机和桌面设备上都能良好显示
- 使用说明：包含简单的操作指南
- 美观界面：使用渐变背景和半透明卡片设计
实现原理
- 使用window.location.href获取当前页面URL
- 使用jQuery.qrcode库在Canvas上绘制二维码
- 二维码尺寸精确设置为150×150像素
- 页面加载完成后自动执行生成过程
使用方法
- 将上述代码复制到HTML文件中
- 在浏览器中打开该HTML文件
- 页面会自动显示当前URL和对应的150×150像素二维码
- 使用手机扫描二维码即可访问该页面
这个实现完全在浏览器前端完成，不需要任何后端支持，也没有外部API调用，确保快速可靠。