当前位置： 首页 > news >正文

HTML5生成二维码

news 2026/2/18 16:52:55

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>

相关文章：

HTML5生成二维码

H5生成二维码 前言二维码实现过程页面实现关键点全部源码 前言 本文主要讲解如何通过原生HTML、CSS、Js中的qrcodejs二维码生成库&#xff0c;实现一个输入URL按下回车后输出URL。文章底部有全部源码&#xff0c;需要可以自取。 实现效果图&#xff1a; 上述实现效果为&#…...

编程日记 2023/11/22 9:40:25

大数据-之LibrA数据库系统告警处理（ALM-25005 Nscd服务异常）

告警解释 系统每60秒周期性检测nscd服务的状态&#xff0c;如果连续4次&#xff08;3分钟&#xff09;查询不到nscd进程或者无法获取ldapserver中的用户时&#xff0c;产生该告警。 当进程恢复且可以获取ldapserver中的用户时&#xff0c;告警恢复。 告警属性 告警ID 告警级…...

编程日记 2023/11/22 9:39:24

NLP：使用 SciKit Learn 的文本矢量化方法

一、说明 本文是使用所有 SciKit Learns 预处理方法生成文本数字表示的深入解释和教程。对于以下每个矢量化器&#xff0c;将给出一个简短的定义和实际示例&#xff1a;one-hot、count、dict、TfIdf 和哈希矢量化器。 SciKit Learn 是一个用于机器学习项目的广泛库&#xff0c;…...

编程日记 2023/11/22 9:38:23

这些仪表板常用的数据分析模型，你都见过吗？

本文由葡萄城技术团队发布。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 ##前言 在数字化时代&#xff0c;数据已经成为了企业决策和管理的重要依据。而仪表板作为一种数据可视化工具&#x…...

编程日记 2023/11/22 9:36:22

【Proteus仿真】【Arduino单片机】多功能数字时钟设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用PCF8574、LCD1602液晶、DS1302温度传感器、DS1302时钟、按键、蜂鸣器等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示当前日期…...

编程日记 2023/11/22 9:33:19

c语言回文数

以下是用C语言编写的回文数代码&#xff1a; #include <stdio.h>int main() { int num, reversedNum 0, remainder, originalNum; printf("请输入一个正整数&#xff1a;"); scanf("%d", &num); originalNum num; while (num …...

编程日记 2023/11/22 9:32:18

【学习记录】从0开始的Linux学习之旅——编译linux内核

一、学习背景 从接触嵌入式至今&#xff0c;除了安装过双系统接触了一丢丢linux外&#xff0c;linux在我眼中向来是个传说。而如今得到了一块树莓派&#xff0c;于是决心把linux搞起来。 二、概念学习 Linux操作系统通常是基于Linux内核&#xff0c;并结合GNU项目中的工具和应…...

编程日记 2023/11/22 9:31:17

uni-app - 日期 · 时间选择器

目录 1.基本介绍 2.案例介绍 ①注意事项&#xff1a; ②效果展示 3.代码展示 ①view部分 ②js部分 ③css样式 1.基本介绍 从底部弹起的滚动选择器。支持五种选择器&#xff0c;通过mode来区分&#xff0c;分别是普通选择器&#xff0c;多列选择器&#xff0c;时间选择器&a…...

编程日记 2023/11/22 9:30:16

使用USB转JTAG芯片CH347在Vivado下调试

简介 高速USB转接芯片CH347是一款集成480Mbps高速USB接口、JTAG接口、SPI接口、I2C接口、异步UART串口、GPIO接口等多种硬件接口的转换芯片。 通过XVC协议&#xff0c;将CH347应用于Vivado下&#xff0c;简单尝试可以成功&#xff0c;源码如下&#xff0c;希望可以一起共建&a…...

编程日记 2023/11/22 9:29:14

硬技能之上的软技巧（三）

在硬技能的基础上&#xff0c;如何运用软技巧来进一步提升个人能力和职业发展。在之前的讨论中&#xff0c;我们提到了硬技能和软技巧的基本概念&#xff0c;以及如何运用软技巧来提升个人能力和职业发展。本篇文章将进一步探讨软技巧中的一些重要方面&#xff0c;包括自我管理…...

编程日记 2023/11/22 9:28:14

mysql 查询

-- 多表查询select * from tb_dept,tb_emp; 内来链接 -- 内连接 -- A 查询员工的姓名 &#xff0c; 及所属的部门名称 &#xff08;隐式内连接实现&#xff09;select tb_emp.name,tb_dept.name from tb_emp,tb_dept where tb_emp.idtb_emp.id;-- 推荐使用select a.name,b.n…...

编程日记 2023/11/22 9:27:12

2311rust过程宏的示例

原文 Rust2018中的过程宏 在Rust2018版本中,我最喜欢的功能是过程宏.在Rust中,过程宏有着悠久而传奇的历史(并继续拥有传奇的未来!) 因为2018年版极大改善了定义和使用它们的体验. 什么是过程宏 过程宏是,在编译时用一段语法,生成新语法的函数.Rust2018中的过程宏有三个风格…...

编程日记 2023/11/22 9:26:10

数据分析：数据预处理流程及方法

数据预处理是数据分析过程中至关重要的一步&#xff0c;它涉及到清洗、转换和整理原始数据&#xff0c;以便更好地适应分析模型或算法。以下是一些常见的数据预处理方法和规则&#xff1a; 数据清洗&#xff1a; 处理缺失值&#xff1a;检测并处理数据中的缺失值&#xff0c;可…...

编程日记 2023/11/22 9:25:10

uniapp 防抖节流封装和使用

防抖(debounce)&#xff1a;定义一个时间&#xff0c;延迟n秒执行&#xff0c;n秒内再次调用&#xff0c;会重新计时&#xff0c;计时结束后才会再次执行 主要运用场景&#xff1a; 输入框实时搜索&#xff1a;在用户输入内容的过程中&#xff0c;使用防抖可以减少频繁的查询…...

编程日记 2023/11/22 9:24:08

springcloud alibaba学习视频

阿里云登录 - 欢迎登录阿里云&#xff0c;安全稳定的云计算服务平台...

编程日记 2023/11/22 9:23:06

【MySQL】一些内置函数（时间函数、字符串函数、数学函数等，学会了有妙用）

内置函数 前言正式开始时间函数显示当前日期、时间、日期时间的日期计算相差多少天示例创建一张表&#xff0c;记录生日 留言表 字符串函数charsetconcatinstr(string, substring)ucase和lcaseleft(string, length)length求字符串长度replace(str, search_str, replace_str)tri…...

编程日记 2023/11/22 9:22:05

QtC++与QColumnView详解

介绍 在 Qt 中&#xff0c;QColumnView 是用于显示多列数据的控件&#xff0c;它提供了一种多列列表视图的方式&#xff0c;类似于文件资源管理器中的详细视图。QColumnView 是基于模型/视图架构的&#xff0c;通常与 QFileSystemModel 或自定义模型一起使用。 以下是关于 QC…...

编程日记 2023/11/22 9:21:04

微信小程序配置企业微信的在线客服

配置企业微信后台 代码实现 <button tap"openCustomerServiceChat">打开企业微信客服</button>methods: {openCustomerServiceChat(){wx.openCustomerServiceChat({extInfo: {url: 你刚才的客服地址},corpId: 企业微信的id,showMessageCard: true,});} …...

编程日记 2023/11/22 9:20:03

深入理解Java AQS：从原理到源码分析

目录 AQS的设计原理1、队列节点 Node 和 FIFO队列结构2、state 的作用3、公平锁与非公平锁 AQS 源码解析1、Node节点2、acquire(int)3、release(int)4、自旋&#xff08;Spin&#xff09;5、公平性与 FIFO 基于AQS实现的几种同步器1、ReentrantLock&#xff1a;可重入独占锁2、…...

编程日记 2023/11/22 9:19:02

【数据结构(四)】栈（1）

文章目录 1. 关于栈的一个实际应用2. 栈的介绍3. 栈的应用场景4. 栈的简单应用4.1. 思路分析4.2. 代码实现 5. 栈的进阶应用(实现综合计算器)5.1. 栈实现一位数计算(中缀表达式)5.1.1. 思路分析5.1.2. 代码实现 5.2. 栈实现多位数计算(中缀表达式)5.2.1. 解决思路5.2.2. 代码实…...

编程日记 2023/11/22 9:18:01

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/2/9 0:12:12

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2026/2/17 3:41:23

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2026/2/8 10:51:38

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2026/2/17 18:54:44

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2026/2/12 10:22:24

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2026/2/17 20:40:05

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2026/2/18 0:20:12

Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

编程新知 2025/10/16 14:46:22

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2026/2/18 0:13:35