HTML5實現驗證碼代碼
<!DOCTYPE html>
<html>
<head>
<title>HTML5實現驗證碼代碼</title>
<meta charset="UTF-8">
</head>
<body>
<form action="login.php" method="post">
<div>
<label for="username">用戶名:</label>
<input type="text" name="username" id="username">
</div>
<div>
<label for="password">密 碼:</label>
<input type="password" name="password" id="password">
</div>
<div>
<label for="code">驗證碼:</label>
<input type="text" name="code" id="code">
<canvas id="canvas" width="100" height="50"></canvas>
<button type="submit">登錄</button>
</div>
</form>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//生成隨機數
function random(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
//生成隨機顏色
function randomColor() {
return "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")";
}
//繪制驗證碼
function drawCode() {
var code = "";
var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
for (var i = 0; i < 4; i++) {
var c = chars[random(0, chars.length)];
code += c;
ctx.font = "bold 30px Arial";
ctx.fillStyle = randomColor();
ctx.fillText(c, 10 + i * 25, 35);
}
return code;
}
//繪制背景
function drawBg() {
ctx.fillStyle = randomColor();
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
//繪制干擾線
function drawLine() {
for (var i = 0; i < 2; i++) {
ctx.beginPath();
ctx.moveTo(random(0, canvas.width), random(0, canvas.height));
ctx.lineTo(random(0, canvas.width), random(0, canvas.height));
ctx.strokeStyle = randomColor();
ctx.stroke();
}
}
//刷新驗證碼
function refreshCode() {
drawBg();
drawLine();
var code = drawCode();
document.getElementById("code").value = code;
}
//初始化驗證碼
refreshCode();
//點擊驗證碼刷新
canvas.onclick = function() {
refreshCode();
}
</script>
</body>
</html>以上是HTML5實現驗證碼代碼的示例，該代碼通過Canvas繪制隨機驗證碼和干擾圖形，并在點擊驗證碼時刷新驗證碼，提高了驗證碼的安全性和可讀性。