From 99cc62027ee4cd34d54a65787efbb81aeec8e631 Mon Sep 17 00:00:00 2001
From: Mingyuan Chen <chenm53@cardiff.ac.uk>
Date: Tue, 19 Nov 2024 15:14:09 +0000
Subject: [PATCH] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=8A=9F=E8=83=BD?=
=?UTF-8?q?=E6=B5=8B=E8=AF=95=E6=BC=94=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
verificationcodedemo.html | 103 ++++++++++++++++++++++++++++++++++++++
1 file changed, 103 insertions(+)
create mode 100644 verificationcodedemo.html
diff --git a/verificationcodedemo.html b/verificationcodedemo.html
new file mode 100644
index 0000000..a7198bb
--- /dev/null
+++ b/verificationcodedemo.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>js简å•éªŒè¯ç 使用</title>
+<style>
+ .code {
+ font-family: Arial;
+ font-style: italic;
+ color: blue;
+ font-size: 30px;
+ border: 0;
+ padding: 2px 3px;
+ letter-spacing: 3px;
+ font-weight: bolder;
+ float: left;
+ cursor: pointer;
+ width: 150px;
+ height: 50px;
+ line-height: 60px;
+ text-align: center;
+ vertical-align: middle;
+ background-color: #D8B7E3;
+ }
+ span {
+ text-decoration: none;
+ font-size: 12px;
+ color: #288bc4;
+ padding-left: 10px;
+ }
+ span:hover {
+ text-decoration: underline;
+ cursor: pointer;
+ }
+</style>
+</head>
+<script>
+ // 页é¢åŠ 载时，生æˆéšæœºéªŒè¯ç
+ window.onload = function () {
+ createCode(4);
+ }
+
+ // 生æˆéªŒè¯ç 的方法
+ function createCode(length) {
+ var code = "";
+ var codeLength = parseInt(length); // 验è¯ç 的长度
+ var checkCode = document.getElementById("checkCode");
+ // 所有候选组æˆéªŒè¯ç çš„å—符
+ var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
+ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
+ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
+ // 循环组æˆéªŒè¯ç çš„å—符串
+ for (var i = 0; i < codeLength; i++) {
+ // 获å–éšæœºéªŒè¯ç ä¸‹æ ‡
+ var charNum = Math.floor(Math.random() * 62);
+ // 组åˆæˆæŒ‡å®šå—符验è¯ç
+ code += codeChars[charNum];
+ }
+ if (checkCode) {
+ // 为验è¯ç åŒºåŸŸæ·»åŠ æ ·å¼å
+ checkCode.className = "code";
+ // 将生æˆéªŒè¯ç 赋值到显示区
+ checkCode.innerHTML = code;
+ }
+ }
+
+ // 检查验è¯ç 是å¦æ£ç¡®
+ function validateCode() {
+ // 获å–显示区生æˆçš„验è¯ç
+ var checkCode = document.getElementById("checkCode").innerHTML;
+ // 获å–输入的验è¯ç
+ var inputCode = document.getElementById("inputCode").value;
+ console.log(checkCode);
+ console.log(inputCode);
+ if (inputCode.length <= 0) {
+ alert("请输入验è¯ç ï¼");
+ } else if (inputCode.toUpperCase() != checkCode.toUpperCase()) {
+ alert("验è¯ç 输入有误ï¼");
+ createCode(4);
+ } else {
+ alert("验è¯ç æ£ç¡®ï¼");
+ }
+ }
+</script>
+<body>
+ <div>
+ <table border="0" cellspacing="5" cellpadding="5">
+ <tr>
+ <td> <div id="checkCode" class="code" onclick="createCode(4)"></div></td>
+ <td> <span onclick="createCode(4)">看ä¸æ¸…æ¢ä¸€å¼ </span></td>
+ </tr>
+ <tr>
+ <td>验è¯ç ：</td>
+ <td><input type="text" id="inputCode" style="float:left;" /></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td><input type="button" onclick="validateCode()" value="确定" /></td>
+ </tr>
+ </table>
+ </div>
+</body>
+</html>
--
GitLab