JQuery使用插件生产二维码生成起(类似草料二维码生产器)

实现功能:通过文本框的内容生产二维码
在这里插入图片描述
代码结构:
在这里插入图片描述
提供js链接:
https://pan.baidu.com/s/1KRmq_yB1qcJ-PC8NjLe_8A
提取码:26ul

提供index.jsp

<%@ 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>
<title>jquery生成二维码</title>
<!-- 引入js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/qrcode.js"></script>
</head>
<body>
<input id="text" type="text" value="好好学习" 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("亲,请输入内容");
		elText.focus();
		return;
	}
	
	qrcode.makeCode(elText.value);//根据二维码内容生产二维码
}

makeCode();

$("#text").
	on("blur", function () {
		makeCode();
	}).
	on("keydown", function (e) {
		if (e.keyCode == 13) {
			makeCode();
		}
	});
</script>
</body>
</html>
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页