以下是一个简单的JavaScript
随机验证码带输入确定的示例代码：
HTML代码：
```
<div>
<label for="code">请输入
验证码：</label>
<input type="text" id="code" name="code" maxlength="4">
<button id="submit" onclick="checkCode()">确定</button>
</div>
<div>
<canvas id="canvas" width="120" height="40"></canvas>
<button onclick="refresh()">换一张</button>
</div>
```
JavaScript代码：
```
// 生成
随机验证码
function createCode() {
var code = "";
var codeLength = 4; //
验证码长度
var codeChars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (var i = 0; i < codeLength; i++) {
var index = Math.floor(Math.random() * codeChars.length);
code += codeChars.charAt(index);
}
return code;
}
// 绘制
验证码
function drawCode(canvas, code) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "bold 30px Arial";
ctx.fillStyle = "#000";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(code, canvas.width / 2, canvas.height / 2);
}
// 刷新
验证码
function refresh() {
var canvas = document.getElementById("canvas");
var code = createCode();
drawCode(canvas, code);
document.getElementById("code").value = "";
}
// 验证
验证码
function checkCode() {
var inputCode = document.getElementById("code").value.toLowerCase();
var canvas = document.getElementById("canvas");
var code = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height);
var pixels = code.data;
var flag = true;
for (var i = 0; i < pixels.length; i += 4) {
var r = pixels[i];
var g = pixels[i + 1];
var b = pixels[i + 2];
if (r != 0 || g != 0 || b != 0) {
flag = false;
break;
}
}
if (inputCode == "" || inputCode != codeText || flag == false) {
alert("
验证码错误！");
refresh();
} else {
alert("
验证码正确！");
refresh();
}
}
// 初始化
var canvas = document.getElementById("canvas");
var codeText = createCode();
drawCode(canvas, codeText);
document.getElementById("submit").disabled = false;
```
在上述代码中，`createCode()`函数用于生成
随机验证码，`drawCode()`函数用于在指定的Canvas上绘制
验证码，`refresh()`函数用于刷新
验证码，`checkCode()`函数用于验证用户输入的
验证码是否正确。在页面加载完成后，通过调用`drawCode()`函数和禁用提交按钮来初始化
验证码。当用户点击“确定”按钮时，会调用`checkCode()`函数进行验证，验证成功后会弹出提示框，并刷新
验证码。如果验证失败，则会弹出错误提示框并刷新
验证码。
2813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
