HTML5生成二维码

H5生成二维码

  • 前言
  • 二维码实现过程
  • 页面实现关键点
  • 全部源码

前言

本文主要讲解如何通过原生HTML、CSS、Js中的qrcodejs二维码生成库,实现一个输入URL按下回车后输出URL。文章底部有全部源码,需要可以自取。
实现效果图:
HTML5生成二维码_第1张图片
上述实现效果为,在输入url后,回车,则消除旧的二维码生成新的二维码,输入为空则弹窗请输入URL。

二维码实现过程

因为页面又分为元素结构、布局、样式以及功能。那么在这节只讲二维码需要那部分。下节会讲布局部分关键点,最后一节则是全部源码。

  1. 导入qrcode的Js文件
  2. 导入后,写HTML body代码,一个id为text的input,一个id为qrcode的div。input用于输入,div用于装二维码。
  3. <\/div>
  4. js中,我首先定义一个qrcode变量用于初始化二维码,初始化二维码用的是
  5. new QRCode(DOM,{}) DOM是获取到的元素,{}是这个二维码的宽高内容等。在这里就是
  6. var qrcode=new QRCode(document.getElementById(('text'),{width:100px;height:100px;})
  7. 上述代码中,利用输入的url生成了一个宽高都为100px的二维码。
  8. 然后定义无参makeCode方法,用于判断输入框是否输入值,如果没输入则弹窗请输入,如果输入了则调用clear方法清除原有qrcode二维码,并调用qrcodejs自带的参数是url值的makeCode方法生成二维码
  9. 在script中全局调用一次makeCode方法。
  10. 定义一个text变量,用于装id为text的input。
  11. 对id为text的input进行键盘keydown监听,判断输入键盘key值是否为13,13就是回车键的key,是的话就调用无参的makeCode方法判断输入框内是否有值。
  12. 这样就实现了生成二维码功能。

页面实现关键点

本节讲解详细页面如何实现的几个

  • CSS:在全局样式中,outline去除input外轮廓**,box-sizing:border-box**计算元素宽高时不带内边距与边框宽高.如果不加outline在点击输入框后页面就变成了:

  • HTML5生成二维码_第2张图片

  • CSS:flex布局,让元素水平垂直居中,justify-contentaligen-item都为center,min-height:100vh,最小高度为屏幕高度。如果不加flex布局,页面就变成了

  • HTML5生成二维码_第3张图片

  • HTML:input和label用的是绝对定位和相对定位。

全部源码

<!DOCTYPE html>
<html>
	<head>
		<title>Javascript 二维码生成库:QRCode</title>
		<meta charset=UTF-8" />
		<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
		<style>
			/* outline去除inpu外轮廓,box-sizing:border-box计算元素宽高时不带内边距与边框宽高. */
			* {
				margin: 0;
				padding: 0;
				outline: none;
				box-sizing: border-box;
			}

			/* min-height:最小高度为100vh,也就是屏幕高度 */
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background: linear-gradient(-135deg, #0099c8, #2133d0);
			}

			.wrapper {
				width: 600px;
				border: 1px solid gray;
				display: flex;
				padding: 30px;
				background-color: white;
			}

			.wrapper .wrapper_son {
				padding:50px 0px;
				position: relative;
				width: 80%;
			}
			.wrapper .wrapper_QR{
				position: relative;
				width: 20%;
			}
			.wrapper label {
				position: absolute;
				transform: translateY(-20px);
				font-size: 15px;
				color: #4158D0;
			}

			.wrapper input {
				width: 80%;
				height: 100%;
				padding:10px 0px;
				border: none;
				border-bottom: 2px solid #4158D0;;
				font-size: 17px;
				
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="wrapper_son">
				<label>URL:</label>
				<input id="text" type="text" value="https://www.baidu.com" /><br />
			</div>
			<div class="wrapper_QR">
				<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
			</div>
		</div>
		
		<script type="text/javascript">
			var qrcode = new QRCode(document.getElementById("qrcode"), {
				width: 100,
				height: 100
			});

			function makeCode() {
				var elText = document.getElementById("text");

				if (!elText.value) {
					alert("请输入URL");
					elText.focus();
					return;
				}
				qrcode.clear();
				qrcode.makeCode(elText.value);
			}

			makeCode();
			let text = document.getElementById('text')
			text.addEventListener('keydown', function(e) {
				if (e.keyCode == 13) {
					makeCode();
				}
			})
		</script>
	</body>
</html>

你可能感兴趣的:(JavaScript,CSS,html,css,javascript,ecmascript,css3,html5,前端)