【javascript】二维码

这篇具有很好参考价值的文章主要介绍了【javascript】二维码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

【javascript】二维码,# javascript,javascript

解压后打开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有两个方法:文章来源地址https://www.toymoban.com/news/detail-520980.html

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

到了这里,关于【javascript】二维码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序二维码配置】微信公众平台配置二维码,小程序测试二维码,小程序动态二维码,然后扫码打开对应页面进行操作

    微信公众平台地址:微信公众平台 选择 开发管理 – 开发设置 – 扫普通链接二维码打开小程序 配置项 二维码规则: URL 为内含下载校验文件的服务器 URL , 可以加二级,比如我的 https://*** /preview , 二级随便写什么都可以 测试链接(选填): 匹配二维码规则地址,后加 *** 参数, 因

    2024年01月19日
    浏览(65)
  • uniapp小程序中长按识别公众号二维码,企业微信二维码,个人微信二维码

    长按识别公众号二维码,企业微信二维码,个人微信二维码 效果图 通过给image标签添加show-menu-by-longpress=\\\"true\\\"属性,实现长按识别功能 注意:二维码图片样式尺寸不能太小,太小时也会出现长按二维码识别不了

    2024年02月12日
    浏览(59)
  • Android studio 实现生成二维码和扫描二维码

    效果图 build.gradle(:app)添加依赖 Manifests.xml activity_main.xml MainActivity ScanActivity

    2024年02月10日
    浏览(44)
  • 什么是二维码?带你快速了解二维码的原理

    二维条码是指在一维条码的基础上扩展出另一维具有可读性的条码,使用黑白矩形图案表示二进制数据,被设备扫描后可获取其中所包含的信息。与一维条码不同的是,二维条码的长度和宽度都可以记载数据,而一维条码仅宽度记载数据。二维条码还有独特的“定位点”和“

    2024年01月16日
    浏览(42)
  • 二维码怎么做调查问卷?二维码统计数据的技巧

    小伙伴们一定发现,现在用来收集用户数据时,通过扫码填表的方式在很多场景中都被应用,这种方式有效的提升制作者获取用户数据的速度,而且对于填表者而言也更加的便捷。那么用 二维码生成器 ( 免费在线二维码生成器-二维码在线制作-音视频二维码在线生成工具-机

    2024年02月09日
    浏览(39)
  • 【支付系统】java springboot 生成二维码,二维码中文乱码

            支付系统必不可少的就是生成二维码,有时我们会需要将支付链接转换为二维码.用户通过移动设备扫描二维码调起支付. 该篇文章主要使用的是hutool自带的二维码生成功能.  1. 引入依赖(hutool 可以按需引入这里就直接使用all了) 2. hutool的官方已经有很详细的生成方式

    2024年02月11日
    浏览(40)
  • 如何生成微信小程序二维码,小程序内页二维码

    你自己得有个微信公众号,只需要知道小程序的名字就可以了 生成小程序二维码 第一步编辑素材 第二步搜索小程序名字,然后回车,下一步 第三步选小程序码 小程序内页二维码 第一步编辑素材 第二步搜索小程序名字,然后回车,下一步 第三步点击‘获取更多路径’ 第四

    2024年02月15日
    浏览(47)
  • Android实现生成二维码以及扫描二维码的功能(超级简单!)

    文章目录 ​​​​​​ 前言 二、实现生成二维码的功能 三、实现扫面二维码的功能 总结 提示:这里可以添加本文要记录的大概内容: 我是通过一个第三方库来实现二维码的生成,以及扫描二维码的功能,开源库如下: 一、布局文件如下 布局比较简单,就只有简单的一些

    2024年02月12日
    浏览(53)
  • 手机能做静态二维码吗?用手机做二维码的教程

    现在手机上有很多的功能,能够帮助我们应对日常生活中的各种问题,那么如果我们想要在手机上生成一个静态二维码,大家知道该怎么来操作吗?一般制作二维码需要专业的二维码生成工具才可以完成制作,那么下面小编来给大家分享一招静态二维码用手机制作的在线技巧

    2024年02月04日
    浏览(35)
  • 【Android】实现生成二维码、条形码和扫描二维码的功能

    目录 一、添加依赖 二、布局文件 三、实现生成二维码的功能 四、效果图 要先添加一个第三方库来实现二维码的生成以及扫描二维码的功能,开源库如下: 在build.grade(Moudle)中添加依赖: 效果如下: activity_main.xml: MainActivity.java: 简单粗暴! 感谢ლ(°◕‵ƹ′◕ლ)!!!

    2024年02月11日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包