js生成简单二维码

最新推荐文章于 2024-05-09 02:57:36 发布

dadXuan

最新推荐文章于 2024-05-09 02:57:36 发布

阅读量1.7k

点赞数

分类专栏： js 文章标签： js qrCode 二维码

本文链接：https://blog.csdn.net/weixin_38296752/article/details/81135916

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js文件下载地址：https://download.csdn.net/download/weixin_38296752/10554485

一.引入qrcode.js文件

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

二.定义用于展示二维码的div 并设置样式

<style type="text/css">
	#qrcode{
	position: absolute;
    left: 50%;
    top: 50%;
    /* margin-top:-200px;
    margin-left:-200px; */
    margin:-200px 0 0 -200px;
	}
</style>
<body>
	<div id="qrcode"></div>
</body>

三.js中生成二维码


    window.onload=function(){
		var qrcode = new QRCode(document.getElementById("qrcode"), {
			width : 400,//设置宽高
			height : 400
		});
		qrcode.makeCode("二维码内容");
	}

四.完整示例

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js生成二维码</title>
</head>
<script type="text/javascript" src="imgs/js/qrcode.js"></script>

<script type="text/javascript">

	window.onload=function(){
		var qrcode = new QRCode(document.getElementById("qrcode"), {
			width : 400,//设置宽高
			height : 400
		});
		qrcode.makeCode("二维码内容");
	}

</script>
<style type="text/css">
	#qrcode{
	position: absolute;
    left: 50%;
    top: 50%;
    /* margin-top:-200px;
    margin-left:-200px; */
    margin:-200px 0 0 -200px;
	}
</style>
<body>
	<div id="qrcode"></div>
</body>
</html>

dadXuan

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js生成简单二维码

js文件下载地址：https://download.csdn.net/download/weixin_38296752/10554485一.引入qrcode.js文件&lt;script type="text/javascript" src="imgs/js/qrcode.js"&gt;&lt;/script&gt; 二.定义用于展示二维码的div 并设置样式&lt;st...
复制链接

扫一扫