LayUI 2.8.16 在线生成二维码工具网页，借用他人的API来完成

最新推荐文章于 2024-02-23 16:08:18 发布

PieroPc

最新推荐文章于 2024-02-23 16:08:18 发布

阅读量475

点赞数 2

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/PieroPc/article/details/132654597

版权

图示：

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>二维码生成</title>
	<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
	<div class="layui-container">
		<blockquote class="layui-elem-quote" style="margin-top: 30px;">
		  <div class="layui-text">
		    <ul>
		      <li><h1>二维码生成工具</h1></li>
		    </ul>
		  </div>
		</blockquote>
	<ul class="layui-form layui-form-pane" style="margin: 15px;">
	  <li class="layui-form-item">
	    <label class="layui-form-label">输入内容：</label>
	    <div class="layui-input-block">
	      <input class="layui-input" lay-verify="required" name="field1" id="content">
	    </div>
	  </li>
	  <li class="layui-form-item" style="text-align:center;">
	    <button type="submit" lay-submit lay-filter="*" class="layui-btn" onclick="generateQRCode()">生成二维码</button>
	  </li>
	</ul>
	
	  <blockquote class="layui-elem-quote" style="margin-top: 30px;">
	    <div class="layui-text">
	      <ul>
	        <li>新生成 二维码 如下：（提示：长按图片可以保存/分享或右键图片保存）</li>
	        <li id="qrCode" class="qr-code">生成二维码！！！</li>
	        <li>固定网址二维码 https://baidu.com/ </li>
	        <li><img src="https://api.vvhan.com/api/qr?text=https://baidu.com/" alt="百度"></li>
	      </ul>
	    </div>
	  </blockquote>
	</div>
	
	<!-- body 末尾处引入 layui -->
	<script src="layui/layui.js"></script>
	    <script>
	        function generateQRCode() {
	            var contentInput = document.getElementById("content");
	            var qrCodeDiv = document.getElementById("qrCode");
	            var content = contentInput.value;
	
	            // 使用API生成二维码 https://api.vvhan.com/erweima.html
	            var apiUrl = "https://api.vvhan.com/api/qr?text=" + encodeURIComponent(content);
	
	            // 创建img元素并设置src属性为API请求的URL
	            var qrCodeImg = document.createElement("img");
	            qrCodeImg.src = apiUrl;
	
	            // 清空id="qrCode"并添加生成的二维码图片
	            qrCodeDiv.innerHTML = "";
	            qrCodeDiv.appendChild(qrCodeImg);
	        }
	    </script>
</body>
</html>