QRCode.cshtml
5.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!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="en" lang="en">
<head>
<title>二维码</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 src="~/js/tool/qrcode.js"></script>
<style>
.label {
height:100% !important;
}
.text {
border-top:1px solid #eee;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
display: flex;
justify-content: center;
}
.qrCode {
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="layui-form layui-form-pane">
<div class="layui-row">
<div class="layui-form-item">
<p>请在下面文本框输入数据，然后按回车键。</p>
</div>
<div class="layui-form-item">
<div class="layui-col-sm6">
<label class="layui-form-label">二维码数据1</label>
<div class="layui-input-block">
<input id="qrCode1" type="text" class="layui-input">
</div>
</div>
<div class="layui-col-sm6">
<label class="layui-form-label">二维码数据2</label>
<div class="layui-input-block">
<input id="qrCode2" type="text" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-col-sm6">
<label class="layui-form-label label">二维码生成1</label>
<div class="layui-input-block text">
<div id="qrCodeData1" class="qrCode" style="margin-bottom:6%;"></div>
</div>
</div>
<div class="layui-col-sm6">
<label class="layui-form-label label">二维码生成2</label>
<div class="layui-input-block text">
<div id="qrCodeData2" class="qrCode" style="margin-bottom:6%;"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-col-sm6">
<label class="layui-form-label">二维码数据3</label>
<div class="layui-input-block">
<input id="qrCode3" type="text" class="layui-input">
</div>
</div>
<div class="layui-col-sm6">
<label class="layui-form-label">二维码数据4</label>
<div class="layui-input-block">
<input id="qrCode4" type="text" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-col-sm6">
<label class="layui-form-label label">二维码生成3</label>
<div class="layui-input-block text">
<div id="qrCodeData3" class="qrCode" style="margin-top:6%;"></div>
</div>
</div>
<div class="layui-col-sm6">
<label class="layui-form-label label">二维码生成4</label>
<div class="layui-input-block text">
<div id="qrCodeData4" class="qrCode" style="margin-top:6%;"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var qrCodeData1 = new QRCode(document.getElementById("qrCodeData1"), { width: 200, height: 200 });
var qrCodeData2 = new QRCode(document.getElementById("qrCodeData2"), { width: 200, height: 200 });
var qrCodeData3 = new QRCode(document.getElementById("qrCodeData3"), { width: 200, height: 200 });
var qrCodeData4 = new QRCode(document.getElementById("qrCodeData4"), { width: 200, height: 200 });
var inputQRCode1 = document.getElementById("qrCode1");
var inputQRCode2 = document.getElementById("qrCode2");
var inputQRCode3 = document.getElementById("qrCode3");
var inputQRCode4 = document.getElementById("qrCode4");
function makeCode() {
if (inputQRCode1.value) {
qrCodeData1.makeCode(inputQRCode1.value);
}
if (inputQRCode2.value) {
qrCodeData2.makeCode(inputQRCode2.value);
}
if (inputQRCode3.value) {
qrCodeData3.makeCode(inputQRCode3.value);
}
if (inputQRCode4.value) {
qrCodeData4.makeCode(inputQRCode4.value);
}
}
makeCode();
inputQRCode1.addEventListener("keydown", (e) => {
if (e.keyCode == 13) {
makeCode();
}
});
inputQRCode2.addEventListener("keydown", (e) => {
if (e.keyCode == 13) {
makeCode();
}
});
inputQRCode3.addEventListener("keydown", (e) => {
if (e.keyCode == 13) {
makeCode();
}
});
inputQRCode4.addEventListener("keydown", (e) => {
if (e.keyCode == 13) {
makeCode();
}
});
inputQRCode1.addEventListener("blur", makeCode);
inputQRCode2.addEventListener("blur", makeCode);
inputQRCode3.addEventListener("blur", makeCode);
inputQRCode4.addEventListener("blur", makeCode);
</script>
</body>
</html>