【javascript】二维码

javascript二维码的生成可以用第三方库qrcode.js。

下载地址:https://gitcode.net/mirrors/davidshimjs/qrcodejs

解压后打开index.html文件输入百度地址回车,就可以看到指定页面的二维码了。

 

 html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>Cross-Browser QRCode generator for Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
</head>
<body>
<input id="text" type="text" value="http://jindo.dev.naver.com/collie" style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></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("Input a text");elText.focus();return;}qrcode.makeCode(elText.value);
}makeCode();$("#text").on("blur", function () {makeCode();}).on("keydown", function (e) {if (e.keyCode == 13) {makeCode();}});
</script>
</body>

根据使用文档,二维码的生成需要QRCode对象。 

var qrcode = new QRCode(document.getElementById("qrcode"), {text: "http://jindo.dev.naver.com/collie",width: 128,height: 128,colorDark : "blue",colorLight : "red",correctLevel : QRCode.CorrectLevel.H
});

QRCode有两个参数,前一个是插入二维码DOM,后一个可以设置二维码的属性。

text//网址
width//宽度
height//高度
colorDark//点颜色
colorLight//背景颜色
correctLevel//容错率//correctLevel : QRErrorCorrectLevel.L,(7%)//correctLevel : QRErrorCorrectLevel.M,(15%)//correctLevel : QRErrorCorrectLevel.Q,(25%)//correctLevel : QRErrorCorrectLevel.H,(30%)
colorDark : "blue",

colorDark : "blue",
colorLight : "red",

 QRCode有两个方法:

qrcode.clear(); // 清除二维码
qrcode.makeCode("http://naver.com"); // 生成其它二维码

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

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

相关文章

4.1ORB-SLAM3之处理缓存队列中的关键帧

0.简介 该函数主要包括以下几个部分&#xff1a; 计算该关键帧特征点的Bow信息更新当前关键帧新增地图点的属性更新共视图中关键帧间的连接关系将该关键帧插入到地图中 1.计算该关键帧特征点的Bow信息ComputeBoW() vector<cv::Mat> vCurrentDesc Converter::toDescr…

【MySQL数据库】MMM高可用架构

目录 一 、MMM简介1.1MMM&#xff08;Master-Master replication manager for MvSQL&#xff0c;MySQL主主复制管理器&#xff09;1.2关于 MMM 高可用架构的说明如下 二、搭建mysql MMM架构2.1实验环境2.2搭建多主多从2.3安装配置 MySQL-MMM 一 、MMM简介 1.1MMM&#xff08;M…

四、Docker镜像详情

学习参考&#xff1a;尚硅谷Docker实战教程、Docker官网、其他优秀博客(参考过的在文章最后列出) 目录 前言一、Docker镜像1.1 概念1.2 UnionFS&#xff08;联合文件系统&#xff09;1.3 Docker镜像加载原理1.4 重点理解 二、docker commit 命令2.1 是什么&#xff1f;2.2 命令…

pytorch快速入门中文——01

PyTorch 深度学习&#xff1a;60分钟快速入门 原文&#xff1a;https://pytorch.org/tutorials/beginner/deep_learning_60min_blitz.html 作者&#xff1a; Soumith Chintala https://www.youtube.com/embed/u7x8RXwLKcA 什么是 PyTorch&#xff1f; PyTorch 是基于以下两个…

无限极 × 盖雅工场|劳动力管理系统项目正式启动,为多工厂管理保驾护航

6月12日&#xff0c;无限极盖雅工场劳动力管理系统启动大会在广东江门举行。无限极IT供应链系统负责人毛松和、智能制造总监胡波、新会生产中心负责人胡流云、营口生产中心负责人源博恩和人才资源共享服务负责人林岳&#xff0c;以及盖雅工场华南总经理潘磊等出席了启动大会。 …

uniapp打包白屏问题

【bug】&#xff1a;浏览器运行正常&#xff0c;模拟器、真机运行只有tab栏显示&#xff0c;或者完全白屏。打包也是白屏。 【控制台报错信息】&#xff1a; 注意&#xff1a;app不支持dom操作 【解决办法】&#xff1a;在main.js里修改 render函数是vue通过js渲染dom结构的…

html5学习精选5篇案例

html5学习心得1 一&#xff1a;了解HTML5前端开发技术 HTML 指的是超文本标记语言 (Hyper Text Markup Language)&#xff0c;标记语言是一套标记标签 (markup tag)&#xff0c;HTML 使用标记标签来描述网页。HTML5区别于HTML的标准&#xff0c;基于全新的规则手册&#xff0…

【云原生】二进制k8s集群(下)部署高可用master节点

本次部署说明 在上一篇文章中&#xff0c;就已经完成了二进制k8s集群部署的搭建&#xff0c;但是单机master并不适用于企业的实际运用&#xff08;因为单机master中&#xff0c;仅仅只有一台master作为节点服务器的调度指挥&#xff0c;一旦宕机。就意味着整个集群的瘫痪&#…

shell脚本ssh远程执行命令给变量赋值的问题

需求及目标 从A机器通过SSH方式到B机器&#xff0c;并执行相关的命令。命令中包含变量及变量的赋值。 代码如下&#xff0c;意思是&#xff0c;ssh到192.111.111.27这台机器&#xff0c;cd到 / 根目录下&#xff0c;并执行ls命令&#xff0c;如果ls出来的结果不为空&#xff…

Excel 2019访问SQL Server数据库的实现过程

源之&#xff1a;https://vip.kingdee.com/article/288066926977041920?productLineId11 在日常ERP系统实施过程中&#xff0c;往往会遇到客户的一些个性化需求&#xff0c;比如有些客户习惯用Excel电子表格来查看ERP系统中的数据&#xff0c;业余拓展学习了一下&#xff0c;借…

浅析EasyCVR视频技术与AR实景智能管理平台在智慧厂区中的应用

一、背景分析 新型智慧厂区是运用人工智能、大数据、物联网和设备监控技术加强厂区安保和信息管理。通过先进技术&#xff0c;保障厂区生产运营安全&#xff0c;同时减少生产线上的人工干预、及时正确地采集各类生产数据&#xff0c;以及合理的生产计划编排与生产进度&#xff…

matlab将数据写入到excel中

第一种&#xff1a; 将数据转化为cell块&#xff0c;从A1单元格写起 % xlswrite(info_10*2.xls ,sheet1,B2:B4) clear; clc; a[1 2 3 4 5 6 ];%三组数据 b[11 22 33 44 55 66]; c[12 23 34 45 56 61]; data [a b c];%把数据保存到data中&#xff0c;其中a的表示转置 [m p]si…