前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >用QRCode.js制作二维码的生成器(qrcode.makeCode方法生成二维码)

用QRCode.js制作二维码的生成器(qrcode.makeCode方法生成二维码)

作者头像
Rattenking
修改于 2025-06-25 09:13:45
修改于 2025-06-25 09:13:45
3.8K01
代码可运行
举报
文章被收录于专栏:RattenkingRattenking
运行总次数:1
代码可运行

现在前端二维码的生成器有很多,像草料二维码生成器,联图二维码生成器等这些在线生成器都是生成功能比较强大,生成的二维码比较精美的在线生成器,看着比较高大上,那么他们的实现原理?就是通过QRCode.js插件的qrcode.makeCode方法来生成的二维码。

1,引入QRCode.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="QRCode.js" type="text/javascript" charset="utf-8"></script>

2,利用该插件生成二维码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
(function(){
	let elText = document.getElementById("text");
	let qrcode = new QRCode(document.getElementById("qrcode"), {
		width : 120,
		height : 120
	});
	function makeCode(){
		if (!elText.value) {
			elText.onfocus();
			return;
		}
		qrcode.makeCode(elText.value);
	}
	makeCode();
	elText.addEventListener('blur',function(){
		makeCode();
	},false);
	elText.addEventListener('keydown',function(e){
		if(e.keyCode === 13)makeCode();
	},false);
}())

注意:

(1),new QRCode({})此处是对生成二维码的初始化,可以设置生成二维码的宽高,颜色,背景等属性

(2),获取输入框的文本,通过qrcode.makeCode方法制作二维码

(3),对文本绑定失去焦点事件和键盘的enter键事件

效果demo:

下载demo:

http://download.csdn.net/download/m0_38082783/9985117

效果图:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/09/19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
搞它!!!Linux系统LVM原理及磁盘配额(PV、VG、LV、PE的关系,手把手教你,嘴对嘴的传达)
当你在使用linux系统时,为了满足当时的工作需要你装了一个100G的磁盘,但是你发现随着公司的发展,和需要储存数据的空间的增大,你会不会重新买些磁盘给装到机器上去呢?每装一次重新分配一次磁盘,就复制一次数据,那这样对于工作的你,是不是非常的麻烦?如果我们用LVM就能解决这类的磁盘管理问题。
不吃小白菜
2020/09/03
6.7K0
搞它!!!Linux系统LVM原理及磁盘配额(PV、VG、LV、PE的关系,手把手教你,嘴对嘴的传达)
Centos对home目录进行扩容
-- 通过df -h 查看,/home目录大小不足。通过增加一块硬盘,扩大/home大小。
jwangkun
2022/01/09
6.5K0
LVM添加硬盘并扩容至已有分区
LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制。LVM将一个或多个磁盘分区(PV)虚拟为一个卷组(VG),相当于一个大的硬盘,我们可以在上面划分一些逻辑卷(LV)。当卷组的空间不够使用时,可以将新的磁盘分区加入进来。我们还可以从卷组剩余空间上划分一些空间给空间不够用的逻辑卷使用。
dogfei
2020/07/31
26.8K2
LVM添加硬盘并扩容至已有分区
通过VG方式给CentOS 7的root分区扩容
我有个VPS,因为不能自己安装系统,每次都得提交工单让他们帮助安装,而他们使用的也是模板安装,系统盘只给20G,/dev/mapper/centos-root分区只有8.5G,系统刚安装完一切都还好,大概只占用了不到2G,可是日积月累,这个分区就会吃满。那有没有办法在后期给/dev/mapper/centos-root分区扩展呢?最好是无痛的,答案当然是:有。 这个是有前提条件的,那就是你还得有一块数据盘,当然,我的VPS是有格外有一块150G的数据盘了,我不想把整块硬盘全加到/dev/mapper/centos-root分区,所以,先把这个数据盘分区,比如我要拿出30G加到root分区,那么我就需要把数据盘分成30G和120G这两个区,之后把30G的分区加到root上。下面是简单的步骤了: 1.先看下各盘的占用情况:
徐大嘴
2019/03/21
2.7K0
Linux根目录扩容(lvm)
Linux根目录磁盘空间不够用了,当修改了虚拟机模版增加磁盘大小或者插入了一块新硬盘,但是发现系统里的大小还是没改变。 产生的原因是没有给磁盘格式化,没有增加分区。
用户9949933
2023/02/24
7.2K0
linux_lvm xfs磁盘化分及扩容
一、linux_lvm磁盘化分 1、新添加的硬盘,fdisk -l 可以看到 sdb 新的未分配的分区。
拓荒者
2019/08/22
5.8K0
linux_lvm xfs磁盘化分及扩容
CentOS7默认安装的/home中转移空间到根目录/ - LVM操作简明教程
转自 http://blog.csdn.net/evandeng2009/article/details/49814097
@凌晨
2020/05/28
3K0
CentOS7默认安装的/home中转移空间到根目录/ - LVM操作简明教程
Linux下对lvm逻辑卷分区大小的调整(针对xfs和ext4不同文件系统)
当我们在安装系统的时候,由于没有合理分配分区空间,在后续维护过程中,发现有些分区空间不够使用,而有的分区空间却有很多剩余空间。如果这些分区在装系统的时候使用了lvm(前提是这些分区要是lvm逻辑卷分区),那么就可以轻松进行扩容或缩容!不同文件系统类型所对应的创建、检查、调整命令不同,下面就针对xfs和ext2/3/4文件系统的lvm分区空间的扩容和缩容的操作做一记录: ----------------------------------------------------------------------
洗尽了浮华
2018/01/22
4.3K0
CentOS7.x系统根目录分区扩容
说明:系统版本为 Linux version 3.10.0-327.el7.x86_64
拓荒者
2019/08/22
2K0
Linux 温习(六): LVM 磁盘
逻辑卷管理器(Logical volume Manager)是 Linux 系统用于对硬盘分区进行管理的一种机制,理论性较强,其创建初衷是为了解决硬盘设备在创建分区后不易修改分区大小的缺陷。尽管对传统的硬盘分区进行强制扩容或缩容从理论上来讲是可行的,但是却可能造成数据的丢失。而 LVM 技术是在硬盘分区和文件系统之间添加了一个逻辑层,它提供了一个抽象的卷组,可以把多块硬盘进行卷组合并。这样一来,用户不必关心物理硬盘设备的低层架构和布局,就可以实现对硬盘分区的动态调整。
高久峰
2023/09/18
7750
Linux 温习(六): LVM 磁盘
Linux多块物理磁盘做LVM
最近刚刚跳槽,新单位同事问了我个问题,突然把我问懵了,因为好久没有接触底层磁盘了,于是做了以下的实验。
Bob hadoop
2021/02/27
5.3K0
Linux多块物理磁盘做LVM
Linux 温习(六): LVM 磁盘
逻辑卷管理器(Logical volume Manager)是 Linux 系统用于对硬盘分区进行管理的一种机制,理论性较强,其创建初衷是为了解决硬盘设备在创建分区后不易修改分区大小的缺陷。尽管对传统的硬盘分区进行强制扩容或缩容从理论上来讲是可行的,但是却可能造成数据的丢失。而 LVM 技术是在硬盘分区和文件系统之间添加了一个逻辑层,它提供了一个抽象的卷组,可以把多块硬盘进行卷组合并。这样一来,用户不必关心物理硬盘设备的低层架构和布局,就可以实现对硬盘分区的动态调整。
陈大剩博客
2023/02/17
3.4K0
Linux 温习(六): LVM 磁盘
VMware虚拟机中Linux系统磁盘空间扩容实战
 平常在VMware上创建Linux系统虚拟机的时候,往往当时不会给太多的磁盘空间,在后期的使用过程中经常会遇到磁盘空间不足的情况,需要对Linux系统扩展磁盘空间。
非著名运维
2022/06/22
3.2K0
VMware虚拟机中Linux系统磁盘空间扩容实战
VM虚拟机扩容操作
之前在VMware上虚拟出了几个Centos搭建环境,随手分了80G给每台虚拟机,可是随着业务的发展,我发现虚拟机的磁盘空间不够了。这里记录下如何操作!
summerking
2022/09/16
1.3K0
VM虚拟机扩容操作
Linux基础(day16)
(若系统中没做lvm操作,但是 df -h 查看时会发现存在lvm文件,那是因为在安装系统的时候,未设置手动分区,系统就默认以lvm的形式分区了) 4.10/4.11/4.12 lvm讲解 LVM讲解
运维小白
2018/02/06
1.7K0
Linux基础(day16)
Centos7下LVM对文件系统进行在线扩容
今天在测试一台vps,结果他家的模板系统分区太不好了(就不喷了),本来想让人家客服看看处理下,结果人家直接来了一句自己分。所以才有了这篇笔记,顺便也可以复习下LVM。 硬盘总空间是30G的SSD,根分区给了10G,剩下的20G空间挂载到了/home下。 [root@MyCloudServer ~]# df -h Filesystem                   Size  Used Avail Use% Mounted on /dev/mapper/centos-root      8.5G  93
行 者
2018/03/26
2.2K0
虚拟机lvm 扩容「建议收藏」
1.先在Vmware上,把虚拟机硬盘做扩展,如果有快照存在,磁盘可能是不可编辑状态,先删除快照后再扩展。
全栈程序员站长
2022/08/28
1.2K0
磁盘扩容
磁盘扩容 磁盘分区 parted /dev/sdb # GPT就是GRUB分区表,如果是MBR,最大支持2T分区 mktable gpt # 创建一个 2G 的磁盘空间 mkpart primary 0K 2048G # 给1好分区更改为 lvm 格式 toggle 1 lvm centos7 xfs 文件系统 lvm 扩展 因为Centos7默认文件系统是xfs文件系统类型,在xfs文件系统中,只能增大分区而不能减小。 Centos6,Centos5系统都是ext4,ext3文件系统。所以操作方法有一点
张琳兮
2020/08/01
2.8K0
Lvm管理
逻辑卷管理LVM(Logical Volume Manager)是Linux系统的一种管理硬盘分区机制,具有动态管理硬盘的能力。本文介绍了如何通过LVM在多块云盘上创建一个逻辑卷,适用于Linux实例。
mikelLam
2022/10/31
9370
Linux磁盘管理之LVM快速入门配置
描述:LVM——Logical Volume Manager就是动态卷管理在Linux2.4内核以上实现的磁盘管理技术,它可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。
全栈工程师修炼指南
2022/09/28
1.9K0
Linux磁盘管理之LVM快速入门配置
相关推荐
搞它!!!Linux系统LVM原理及磁盘配额(PV、VG、LV、PE的关系,手把手教你,嘴对嘴的传达)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验