网站实现二维码

最新推荐文章于 2023-10-07 19:52:54 发布

五只小狗

最新推荐文章于 2023-10-07 19:52:54 发布

阅读量145

点赞数

分类专栏： web开发文章标签： jq

本文链接：https://blog.csdn.net/qq_43898141/article/details/103087416

版权

web开发专栏收录该内容

25 篇文章 0 订阅

订阅专栏

QRcode.js实现二维码
首先去官网下载jq依赖官网http://davidshimjs.github.io/qrcodejs/
在这里插入图片描述
直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二维码</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jsCss/qrcode.js"></script>
<style type="text/css">
#idqrcode{
    width: 100%;
    height: 100%;
    position: fixed;
    right: 0px;
    left: 0px;
	top: 0px;
    bottom: 0px;
    z-index: 500;
}
#idqrcode2{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  width:60%;
  height:70%;
  background:#ffffff;
  position: fixed;
  right: 0px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  padding-top: 0px;
  text-align: center;
  z-index: 500;
  border: 3px solid #686868;
  box-shadow: 2px 2px 10px 2px; 
}
#text{
   display:block;
   margin:  0 auto;
   width: 50%;
   height: 40px;
   border-radius: 10px;
   outline: none;
   border: 1px solid #686868;
   }
   #shang{
     height: 68%;
     width: 100%;
     
   }
   #xiadiv{
    height: 28%;
    width: 100%;
   
   }
</style>
</head>

<body>

<div id="idqrcode">
	<div id="idqrcode2">
	<div id="shang">
	<p style="height: 80px; width: 100%; color: #686868;">友情提示：填写生成二维码可以是网址 文字 字母 数字 填写完毕后 敲击回车键 <br>默认的二维码是当前网页的二维码，可以打开手机扫一扫查看呦！</p>
		    <div id="qrcode" style="width:200px; height:200px; margin: 0 auto;"></div>		
	</div>
	<div id="xiadiv">
			<input id="text" type="text" value="" style="width:80%" placeholder="填写生成二维码可以是网址 文字 字母 数字 填写完毕后敲击回车键即可完毕"/><br/>		
	</div>
	       
	</div>
</div>

<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
	width : 200,
	height : 200
});

function makeCode () {		
	var elText = document.getElementById("text");	
	if (elText.value == '') {
		qrcode.makeCode("http://www.scy917.com");
		return;
	}	
	qrcode.makeCode(elText.value);
}

makeCode();

$("#text").on("keyup", function () {
		makeCode();
	})
</script>
</body>
</html>

也没什么注意的我基本就是复制官网提供的代码，修修改改而已下载的压缩包里有demo，挺简单的
在这里插入图片描述
效果图

我自己添加了点css样式，个人感觉不算太丑
如果有什么不懂可以加入qq群讨论讨论：668535367

五只小狗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网站实现二维码

QRcode.js实现二维码首先去官网下载jq依赖官网http://davidshimjs.github.io/qrcodejs/直接上代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>二维码</title><script src="ht...
复制链接

扫一扫