网页前端知识汇总(三)——网页前端利用二维码插件qrcode生成在线二维码

news2025/7/11 9:37:12

最近几年二维码的广泛应用,方便了很多行业,如支付宝,微信,小程序扫码之类的,这个在二十年前,想都不敢想这么方便,那时候有书刊编码扫一扫都感觉是高科技了,如今,二维码的广泛应用,生活还是方便了不少!这个得益于移动智能设备的发展

 

那网页上的二维码是怎么生成的呢?一般很少中小企业自己开发JS库,大部分使用第三方库使用,下面我讲解下我现在在使用的JS库,qrcode.js

首先,在使用之前,你要在网络上下载qrcode.js库文件,网络上很多下载点;下载好后新建一个demo.html文件,引入qrcode.js库文件;

<script type="text/javascript" src="js/qrcode.js"></script>

这个路径是我测试用的路径,你可以根据自己的项目路径自定义,确保路径能够访问该库文件地址

下面就是新建一个div,如下面

<div id="xycms_qrcode"></div>

注意,一定要命名id属性值,这个也是指定生成区域的唯一标识,我命名为xycms_qrcode;

下面我说下生成方法(默认使用CSDN网址作为测试)

方法一:利用默认生成方法

<script>
new QRCode(document.getElementById('xycms_qrcode'), 'https://www.csdn.net/');
</script>

刷新下浏览器地址,是不是二维码就生成好了呢

方法二:自定义生成,根据自己喜好,对二维码颜色,大小自定义设置

<script>
var qrcode = new QRCode('xycms_qrcode', {
  width: 256,
  height: 256,
  colorDark : '#ffffff',
  colorLight : '#6C3',
  correctLevel : QRCode.CorrectLevel.H
});
qrcode.makeCode('https://www.csdn.net/');
</script>

这样就生成底色白色,绿色线条的二维码了,替代了默认白底黑条的二维码;比起默认,我自己更倾向于自定义,根据自己的喜好自定义随意调整;

好了,简单的生成二维码技术就介绍到这里了

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RNA-seq 详细教程:实验设计(2)

学习目标 了解设置重复对于 RNA-seq 分析的重要性了解生物重复次数、测序深度和鉴定到的差异表达基因之间的关系了解如何设计RNA-seq 实验&#xff0c;以避免批次效应1. 注意事项 了解 RNA 提取和 RNA-seq 文库制备实验过程中的步骤&#xff0c;有助于设计 RNA-seq 实验&#x…

PyTorch学习笔记-常用函数与数据加载

1. PyTorch常用函数 &#xff08;1&#xff09;路径相关的函数 假设我们数据集的目录结构如下&#xff1a; 首先需要 import os&#xff0c;在 os 中常用的路径相关的函数有&#xff1a; os.listdir(path)&#xff1a;将 path 目录下的内容列成一个 list。os.path.join(path1…

cmake入门教程 跨平台项目构建工具cmake介绍

一.初识cmake 在介绍cmake之前&#xff0c;我们先来从工具一个个衍生出来&#xff0c;做过linux c/c编程的时候一般用过gcc指令或者makefile。我们先来介绍下 gcc&#xff08;GNU Compiler Collection&#xff09;将源文件编译&#xff08;Compile&#xff09;成可执行文件或…

若依框架解读(前后端分离版)—— 1.Spring Security相关配置(@Anonymous注解)

有关Spring Security与JWT相关知识可以看我之前写的文章&#xff1a;SpringBoot整合SpringSecurityJWT(三更草堂) 这边需要对RBAC模型有一点了解&#xff0c;比较简单可自行百度。 首先查看Security配置类SecurityConfig&#xff0c;如果我们想要放行自己写的接口是可以在此配置…

数学建模国赛/美赛常见赛题类型及建模方案(纯干货)

目录 一&#xff0c;评价类问题 1&#xff0c;建模步骤如下图所示&#xff1a; 2&#xff0c;主客观评价问题的区别 3&#xff0c;如何选择合适的评价方法 二&#xff0c;预测类赛题 1&#xff0c;预测类赛题的基本解题步骤 2&#xff0c;预测类问题的区别 3&#xff0c;…

什么是Tomcat?如何使用Tomcat?如何部署一个静态页面?

目录 1、Tomcat是什么&#xff1f; 2、下载安装 3、目录结构 4、启动服务器 5、部署静态页面&#xff08;简单举例&#xff09; 1、Tomcat是什么&#xff1f; Tomcat是一个HTTP服务器&#xff0c;Tomcat就是基于Java实现的一个开源免费的HTTP服务器 2、下载安装 下载网…

virtualbox安装openEuler-方案二

下载的讲解在另一篇&#xff1a;VirtualBox安装openEuler 方案一 安装&#xff1a; 1&#xff0c;配置网卡 2&#xff0c;加载光驱设置 选择对应的iso文件即可。 3&#xff0c;启动openEuler 选择第一个即可&#xff0c;第二个选项一般是在生成环境中使用。 经过一段…

std::weak_ptr(分析、仿写)

目录 一、为什么会有weak_ptr? 1、看一个例子 2.weak_ptr 是什么? 3.weak_ ptr 如何使用? 1、如何创建weak_ ptr 实例 2、如何判断weak_ptr指向的对象是否存在 3、weak_ptr的使用 二、仿写std::weak_ptr 1、c参考手册 2、代码 一、为什么会有weak_ptr? 1、看一个例子…

18uec++多人游戏【服务器为两个角色发枪,并能在线开枪】

打开主角类&#xff0c;生成枪的代码逻辑在游戏开始函数里 所以在生成之前&#xff0c;我们需要判断该对象是否在服务器端&#xff08;服务器端视角&#xff09; void ASCharacter::BeginPlay() {Super::BeginPlay();DefaultsFOV CameraComp->FieldOfView;//判断是否在服务…

支付系统 — 支付路由

本文主要介绍下支付中路由系统的主要流程。 支付路由的作用 降低成本&#xff1a;越便宜越好&#xff1b; 提高用户体验&#xff1a;用户支付的越爽越好&#xff1b;越快越好&#xff1b;成功率越高越好。 确保有可用通道&#xff1a;多个选择&#xff0c;确保能完成支付。 …

【JVM】PC程序计数器和PC寄存器

一、JVM体系结构 本文所讲内容主要是 JVM 体系结构图中 运行时数据区 中的 PC寄存器&#xff0c;如下图所示&#xff1a; 二、PC寄存器是什么&#xff1f; 这里引用别人的一句话&#xff1a; 首先这里的PC寄存器并非广义上所指的物理寄存器&#xff0c;或许将其翻译为PC计数…

antd Carousel 重写dot样式

antd的Carousel走马灯组件的dot也就是下面那个滑动的按钮非常的不起眼。 白色背景的时候完全看不到。 但是我们大部分时候又都是白色背景&#xff0c;于是来自己重写一下样式。 在控制台看了一下&#xff0c;应该是这个属性在控制dot的颜色&#xff0c;重写这个属性就可以了。…

Nginx源码解析 --红黑树

预读知识 红黑树是一种自平衡二叉树&#xff0c;不仅可以使用二分法快速查找&#xff0c;而且插入和删除操作的效率也很高&#xff0c;常用于构造关联数组&#xff08;例如C标准库里的set和 map)。 在Nginx里红黑树主要用在事件机制里的定时器&#xff0c;检查连接超时&#…

Debian11之基于kubeadm安装K8S集群

官方安装教程 硬件要求 每台机器的内存要 2GB、CPU2 核心及以上 集群中的所有机器的网络彼此均能相互连接&#xff08;公网和内网都可以&#xff09; 节点之中不可以有重复的主机名、MAC 地址或 product_uuid 开启机器上的某些端口 为了保证 kubelet 正常工作&#xff0c;必须…

FluentCRM 2.6.0:更多功能、集成改进等等!

FluentCRM 2.6.0最新版发布了&#xff0c;它是一个主要的更新版本&#xff0c;为您带来了更多的功能、改进的集成、升级和错误修复&#xff01;让我们来看看 FluentCRM 2.6.0 提供了什么新功能&#xff01; 目录 FluentCRM 2.6的更高级过滤条件 电子邮件活动条件 基于自动化…

STC32G 单片机EEPROM 操作实例

一 STC32G 单片机EEPROM简介 STC32G系列单片机内部集成了大量的EEPROM&#xff0c;特别是STC32G12K128集成多达128K EEPROM。 STC32G内部EEPROM可擦写10万次&#xff0c;分若干扇区&#xff0c;每个扇区512字节。EEPROM的写操作只能将1写为0。要将0写为1&#xff0c;必须擦除…

Hive之函数

Hive之函数 第九章 函数 9.1 系统内置函数 9.1.1 理论 查看内置函数&#xff1a; show functions; 显示函数的详细信息&#xff1a; desc function abs; 显示函数的扩展信息&#xff1a; desc function extended concat; 一、关系运算&#xff1a; 1. 等值比较: 2. 等值…

VSCode:使用CMakeLists.txt构建C++项目

vscode配置 插件&#xff1a; CMake插件主要功能是CMake语法高亮、自动补全CMake Tools的功能主要是结合VSCode IDE使用CMake这个工具&#xff0c;比如生成CMake项目、构建CMake项目等CMake Tools Helper CMake工具本身还是要下载到本地&#xff0c;并且配置环境变量。 项目…

足球二三事 - 世界杯征文

征文活动链接&#xff1a; https://bbs.csdn.net/topics/609601920 从报纸上时候看 1982 年的世界杯&#xff0c;当时我们家里没有电视&#xff0c;晚上的时候听到马路对面的房子里传来惊呼声&#xff0c;也不知道为啥。 1983 年的春节前&#xff0c;家里要打扫房间&#xff…

UE4,UE5虚幻引擎源码版下载

1、进入Epic的GitHub仓库 https://github.com/EpicGames/Signup GitHub - EpicGames/Signup: Information about signing up for a free Epic Games account, and getting access to UnrealEngine source code. 2、加入EpicTeamAdmin 3、进入UnrealEngine仓库 4、找到需要下…