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>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TensorFlow实战教程(十八)-Keras搭建卷积神经网络及CNN原理详解

从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前一篇文章详细讲解了Keras实现分类学习,以MNIST数字图片为例进行讲解。本篇文章详细讲解了卷积神经网络CNN原理,并通过Keras编写CNN实现了MNIST分类学习案例。基础性文章,希望对您有所帮助! 一…

[Linux] 进程入门

&#x1f4bb;文章目录 &#x1f4c4;前言计算机的结构体系与概念冯诺依曼体系结构操作系统概念目的与定位 进程概念描述进程-PCBtask_struct检查进程利用fork创建子进程 进程状态进程状态查看僵尸进程孤儿进程 &#x1f4d3;总结 &#x1f4c4;前言 作为一名程序员&#xff0c…

同为科技(TOWE)桌面PDU插排:一款可以DIY定制的“超级插座”

当今社会&#xff0c;各种电子产品和家用电器已成为人们日常生活中不可或缺的一部分&#xff0c;在带给人们便利的同时&#xff0c;也使得电力使用变得更加频繁和重要。然而&#xff0c;当前市面上很多普通插座由于功能单一、材质粗劣、插口数量受限、充电速度过慢、插头间互相…

【shell】 1、bash语法超详细介绍

文章目录 修改前缀路径dirname set常用函数参数变量local 返回值正则打印第 n 行获取行号核对数据库各表数量jq查询检查日志 sshpassexpect数组xargs bash manual 修改前缀 参考 export PS1"bash> "路径 dirname strip last component from file name dir$(…

CMap数据库筛选化学药物

数据库clue.io 文献链接&#xff1a;连接图谱&#xff1a;使用基因表达特征连接小分子、基因和疾病 |科学 (science.org) 基本模式&#xff1a;利用CMap将差异基因列表与数据库参考数据集比对&#xff1b;根据差异表达基因在参考基因表达谱富集情况得到一个相关性分数&#…

新加坡服务器托管-金融企业的选择

新加坡作为一个亚洲金融中心&#xff0c;其优越的地理位置和先进的信息通信技术基础设施&#xff0c;使得其成为了众多金融机构企业选择服务器机房托管的理想地点。金融行业对于服务器的安全性和可靠性要求很高&#xff0c;而将服务器托管在新加坡有许多好处。 首先&#xff0c…

复杂类型,查询--学习笔记

1&#xff0c;复杂类型 解决问题&#xff1a;一些不容易获取到的数据&#xff0c;例如数组类型&#xff0c;集合类型等&#xff0c;获取他们的数据 -- 1.创建表 create table tb_array_person(name string,city_array array<string> )row format delimited fields term…

HarmonyOS ArkTSTabs组件的使用(六)

Tabs组件的使用 ArkUI开发框架提供了一种页签容器组件Tabs&#xff0c;开发者通过Tabs组件可以很容易的实现内容视图的切换。页签容器Tabs的形式多种多样&#xff0c;不同的页面设计页签不一样&#xff0c;可以把页签设置在底部、顶部或者侧边。 Tabs组件的简单使用 Tabs组件…

网络参考模型与标准协议(二)-TCP/IP对等模型详细介绍

应用层 应用层为应用软件提供接口&#xff0c;使应用程序能够使用网络服务。应用层协议会指定使用相应的传输层协议&#xff0c;以及传输层所使用的端口等。TCP/IP每一层都让数据得以通过网络进行传输&#xff0c;这些层之间使用PDU ( Paket Data Unit,协议数据单元)彼此交换信…

局域网文件共享神器:Landrop

文章目录 前言解决方案Landrop软件界面手机打开效果 软件操作 前言 平常为了方便传文件&#xff0c;我们都是使用微信或者QQ等聊天软件&#xff0c;互传文件。这样传输有两个问题&#xff1a; 必须登录微信或者QQ聊天软件。手机传电脑还有网页版微信&#xff0c;电脑传手机比…

gitlab 实战

一.安装依赖 yum install -y curl policycoreutils-python openssh-server perl 二.安装gitlab yum install gitlab-jh-16.0.3-jh.0.el7.x86_64.rpm 三.修改下面的 vim /etc/gitlab/gitlab.rbexternal_url http://192.168.249.156 四.初始化 gitlab-ctl reconfigure 五.查看状…

OpenStack-train版安装之环境准备

环境准备 环境介绍VMware配置WMware虚拟机最低配置WMware添加网卡WMware添加硬盘 基础环境安装修改各节点的主机名修改各节点的hosts文件修改各节点的内核参数关闭各节点的防火墙和selinux安装NPT&#xff08;时间同步&#xff09;安装OpenStack基础服务包 CentOS升级内核 环境…

C++ Qt 学习(九):模型视图代理

1. Qt 模型视图代理 Qt 模型视图代理&#xff0c;也可以称为 MVD 模式 模型(model)、视图(view)、代理(delegate)主要用来显示编辑数据 1.1 模型 模型 (Model) 是视图与原始数据之间的接口 原始数据可以是&#xff1a;数据库的一个数据表、内存中的一个 StringList&#xff…

集合的自反关系和对称关系

集合的自反关系和对称关系 一&#xff1a;集合的自反关系1&#xff1a;原理&#xff1a;2&#xff1a;代码实现 二&#xff1a;对称关系1&#xff1a;原理&#xff1a;2&#xff1a;代码实现 三&#xff1a;总结 一&#xff1a;集合的自反关系 1&#xff1a;原理&#xff1a; …

简单但好用:4种Selenium截图方法了解一下!

前言 我们执行UI自动化操作时&#xff0c;大多数时间都是不在现场的&#xff0c;出现错误时&#xff0c;没有办法第一时间查看到&#xff0c;这时我们可以通过截图当时出错的场景保存下来&#xff0c;后面进行查看报错的原因&#xff0c;Selenium中提供了几种截图的方法&#x…

OpenAI 董事会与 Sam Altman 讨论重返 CEO 岗位事宜

The Verge 援引多位知情人士消息称&#xff0c;OpenAI 董事会正在与 Sam Altman 讨论他重新担任首席执行官的可能性。 有一位知情人士表示&#xff0c;Altman 对于回归公司一事的态度暧昧&#xff0c;尤其是在他没有任何提前通知的情况下被解雇后。他希望对公司的治理模式进行重…

hisi芯片常见专有名词总结SVP MPP NNIE ACL

1.SVP&#xff1a; Smart Vision Platform是海思媒体处理芯片智能视觉异构加速平台。该平台包含了 CPU、DSP、NNIE(Neural Network Inference Engine)等多个硬件处理单元和运行在这些 硬件上 SDK 开发环境&#xff0c;以及配套的工具链开发环境。 不同芯片下的 SVP 硬件资源…

趣学python编程(七、实现个小网站如此简单 web.py使用介绍)

这里先拿一个小网站的例子来举例&#xff0c;保持好奇心就可以了。因为兴趣才是最好的老师&#xff0c;它能激发人内在的行动力。这里介绍个使用web.py轻量级框架实现的一个小网站&#xff0c;可以看到实现个小网站并不难。python都能用来干什么&#xff1f;那么网站就是它众多…

武汉站--ChatGPT/GPT4科研技术应用与AI绘图及论文高效写作

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

执行npm的时候报权限问题的解决方案

我们在执行npm操作的过程中&#xff0c;会出现以下权限问题&#xff0c;解决方案: 管理员身份 运行cmd 切换目录到要执行命令的文件下 再进行npm操作即可