【功能实现】qrcode生成二维码Demo

Dy1ngn

已于 2022-07-31 23:00:20 修改

阅读量718

点赞数 1

分类专栏：功能实现文章标签： javascript 前端 vue.js

于 2022-07-28 18:34:59 首次发布

本文链接：https://blog.csdn.net/weixin_43574035/article/details/126041048

版权

功能实现专栏收录该内容

5 篇文章 0 订阅

订阅专栏

【功能实现】qrcode生成二维Demo

功能简介
代码实现

功能简介

通过qrcode.js生成二维码的简单实现功能，代码很简单，需要在html引入jquery.min.js和qrcode.min.js
demo下载地址

代码实现

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<script type="text/javascript" src="./qrcode/jquery.min.js"></script>
	<script type="text/javascript" src="./qrcode/qrcode.min.js"></script>
	<script src="./qrcode/setQrcode.js"></script>
	<body>
		<input type="text" id="qrcode-input" value="www.baidu.com"/>
		<button onClick="makeCode()">测试按钮</button>
		<div id="qrcode"></div>
	</body>
	<script>
		makeCode()
	</script>
</html>

js

function makeCode() {
	// 需要生成二维码的字符串（可以为链接，可以为普通字符串，可以从外面传入）
	var key = document.getElementById('qrcode-input').value
	// 需要获取一个div实例，用于存放二维码
	var div = document.getElementById('qrcode')
	// 控制二维码的宽高(可拆分)
	var qrcodeSize = 300
	// 将这个div清空，防止重复生成
	div.innerHTML = ''
	var qrcode = new QRCode(div, {
		width: qrcodeSize,
		height: qrcodeSize
	});
	qrcode.makeCode(key);
}

效果图

效果图由于带有二维码无法展示，可以通过demo直接进行查看

Dy1ngn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【功能实现】qrcode生成二维码Demo

通过qrcode生成二维码的简单实现功能，代码很简单，仅需要在html文件引入jquery和qrcode，整体工程js如下，直接引入即可，下载地址如下，提取码love文件demo下载链接效果很简单，在vue工程内部直接引用。............
复制链接

扫一扫