HTML5生成二维码

H5生成二维码

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

前言

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

二维码实现过程

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

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

页面实现关键点

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

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

  • 在这里插入图片描述

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

  • 在这里插入图片描述

  • 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/174455.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

随笔-事儿就这么个事儿

好久没写了&#xff0c;小A要催更&#xff0c;还答应让我写一下他的经历&#xff0c;这还有啥说的&#xff0c;开整。 1、升级 前段时间登录公司的办公系统处理一个事务申请&#xff0c;发现有个粗体标红的通知&#xff0c;是关于今年的晋升名单公示。进去看了一眼&#xff0…

练习7-在Verilog中使用任务task

在Verilog中使用任务task 1&#xff0c;任务目的2&#xff0c;RTL代码&#xff0c;交换3&#xff0c;测试代码4&#xff0c;波形显示 1&#xff0c;任务目的 &#xff08;1&#xff09;掌握任务在verilog模块设计中的应用&#xff1b; &#xff08;2&#xff09;学会在电平敏感…

从零开始学习typescript——变量

就像我们在学校学习语文、英文时候一样&#xff0c;最开始学习的是语法&#xff0c;要知道基础的结构。 图片中包含 变量、标识符、数据类型、运算符、字面量、表达式、控制语句等语法 变量 变量是使用给定的符号名在内存中申请存储地址&#xff0c;并且可以容纳某个值。 语…

PostgreSQL中所的锁

为了确保复杂的事务可以安全地同时运行&#xff0c;PostgreSQL提供了各种级别的锁来控制对各种数据对象的并发访问&#xff0c;使得对数据库关键部分的更改序列化。事务并发运行&#xff0c;直到它们尝试获取互相冲突的锁为止(比如两个事务更新同一行时)。当多个事务同时在数据…

探索 Material 3:全新设计系统和组件库的介绍

探索 Material 3&#xff1a;全新设计系统和组件库的介绍 一、Material 3 简介1.1 Material 3 的改进和更新1.2 Material 3 的优势特点 二、Material 3 主题使用2.1 使用 Material3 主题2.2 使用 Material3 主题颜色 三、Material 3 组件使用3.1 MaterialButton&#xff1a;支持…

栈和队列java实现

栈和队列都是动态集合&#xff0c;且在其上进行DELETE操作所移除的元素是预先设定的。在栈中&#xff0c;被删除的是最近插入的元素&#xff1a;栈实现的是一种后进先出&#xff08;last-in&#xff0c;first-out&#xff0c;LIFO&#xff09; 策略。在队列中&#xff0c;被删去…

AT89S52单片机

目录 一.AT89S52单片机的硬件组成 1.CPU(微处理器) (1)运算器 (2)控制器 2.数据存储器 (RAM) (1)片内数据存储器 (2)片外数据存储器 3.程序存储器(Flash ROM) 4.定时器/计数器 5.中断系统 6.串行口 7.P0口、P1口、P2口和P3口 8.特殊功能寄存器 (SFR) 常用的特殊功…

子虔科技出席2023WAIC“智能制造融合创新论坛”

7月7日&#xff0c;2023世界人工智能大会&#xff08;WAIC&#xff09;闵行会场在大零号湾举办。子虔科技联合创始人周洋作为专家嘉宾受邀参与智能制造融合创新论坛大会。会上探讨了工业和制造业数字化转型的机遇、挑战和对策。其中&#xff0c;周洋提到&#xff0c;工业制造业…

51单片机的智能浇花系统【含proteus仿真+程序+报告+原理图】

1、主要功能 该系统由AT89C51单片机LCD1602显示模块DHT11温湿度模块DS1302时间模块继电器驱动水泵模块光敏传感器等模块构成。适用于智能浇花、自动浇花、智能盆栽等相似项目。 可实现基本功能: 1、LCD1602实时显示北京时间、土壤温湿度、光照强度等信息 2、DHT11采集温湿度信…

②【Hash】Redis常用数据类型:Hash [使用手册]

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ Redis Hash ②Redis Hash 操作命令汇总1. hset…

Apache Airflow (十三) :Airflow分布式集群搭建及使用-原因及

&#x1f3e1; 个人主页&#xff1a;IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 &#x1f6a9; 私聊博主&#xff1a;加入大数据技术讨论群聊&#xff0c;获取更多大数据资料。 &#x1f514; 博主个人B栈地址&#xff1a;豹哥教你大数据的个人空间-豹…

基于Acconeer的A121-60GHz毫米波雷达传感器SDK移植及测距示例(STM32L496为例)

基于Acconeer的A121-60GHz毫米波雷达传感器SDK移植及测距示例&#xff08;STM32L496为例&#xff09; 工程&#xff1a; Keil工程资源 参考资料&#xff1a; A121 datasheet 1.3 A121 HAL Software Integration User Guide A121 STM32CubeIDE User Guide 官方参考示例工程&a…

linux rsyslog综合实战2

本次我们通过rsyslog服务将A节点服务器上的两个(E.g:多个日志也可以)日志(Path:/var/log/245-1.log、245-2.log)实时同步到B节点服务器目录下(Path:/opt/rsyslog/245) 1.rsyslog架构 2.环境信息 环境信息 HostnameIpAddressOS versionModuleNotersyslog1192.168.10.245CentOS…

【Docker】从零开始:3.Docker运行原理

【Docker】从零开始&#xff1a;3.Docker运行原理 Docker 工作原理Docker与系统的关系Docker平台架构图解 Docker 工作原理 Docker与系统的关系 Docker 是一个 Client-Server 结构的系统&#xff0c;Docker 守尹进程运行在王机上&#xff0c; 然后通过 Socket 连接从各尸端坊…

【广州华锐互动】VR溺水预防教育:在虚拟世界中学会自救!

在现代社会中&#xff0c;水上安全和救援行动的重要性不言而喻。尤其在自然灾害、游泳事故或航海事故中&#xff0c;有效的救援行动可以挽救许多生命。然而&#xff0c;传统的救援训练往往存在成本高、风险大、效率低等问题。在这样的背景下&#xff0c;虚拟现实&#xff08;VR…

1.Gin 介绍

1.Gin 介绍 介绍 Gin 是一个 Go (Golang) 编写的轻量级 http web 框架&#xff0c;运行速度非常快&#xff0c;如果你是性能和高效的追求者&#xff0c;我们推荐你使用 Gin 框架。 Gin 最擅长的就是 Api 接口的高并发&#xff0c;如果项目的规模不大&#xff0c;业务相对简单&a…

JVM垃圾收集器

什么是垃圾收集器 Java虚拟机的垃圾收集器是内存回收的具体实现&#xff0c;主要用于回收不再使用的对象&#xff0c;释放内存空间。Java虚拟机提供了多种垃圾收集器&#xff0c;不同的垃圾收集器适用于不同的场景和需求。 在C中&#xff0c;对象所占的内存在程序结束运行之前…

【Spring】使用xml配置AOP

文章目录 1.前言2.xml配置AOP3. 总结 1.前言 在之前的学习中,都是使用注解的方式进行AOP的配置.其实使用xml配置文件也可以配置AOP. 2.xml配置AOP xml配置AOP方法如下: 添加相关依赖 <dependencies><dependency><groupId>org.springframework</groupId…

vue实现el-menu与el-tabs联动

效果图如下&#xff1a; 当标签栏很多的时候效果图如下&#xff1a; 左侧菜单布局 &#xff08;$route.path高亮显示激活路由 :default-active"$route.path"&#xff09; <el-menu:default-active"$route.path"class"el-menu-vertical-demo"b…