验证码示例网站
这是一个简单的验证码示例网站，通过使用HTML、CSS和JavaScript实现了一个基本的验证码功能。用户在网页上输入验证码后，点击提交按钮进行验证。
HTML结构
<div class="verify-wrap">
<input type="text" class="drag-btn" id="captchaInput" placeholder="请输入验证码">
<button class="submit-btn" onclick="checkCaptcha()">提交</button>
</div>
CSS样式
*{margin:0;padding:0;box-sizing:border-box}.verify-wrap{width:350px;height:40px;background-color:#F5F5F5;border:1px solid #e0e0e0;margin:5px auto;position:relative}.verify-wrap .drag-btn{position:absolute;left:-1px;top:-1px;width:50px;height:44px;background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAYAAAA6GuKaAAABlklEQVRYhe2Yu04CQRSG/91sqAgQCQ0m3Do6KanxEaRUGyjkZiOQqC+gJiwumqgVlvIO2EpJRwuFhISQwAIhWQkYNrGHZeYIyXzNTjH558tkZ3LOSO12e4k9Q1np+v3+vbHudDqQd8BjY4Q0FUKaCiFNhZCmQkhTIaS).png}
该网站使用了margin:0; padding:0; box-sizing:border-box;来设置元素的外边距、内边距和盒模型为边框盒。.verify-wrap类定义了验证码容器的样式，包括宽度、高度、背景颜色、边框等。.drag-btn类定义了拖动按钮的样式，包括位置、大小和背景图片等。.submit-btn类定义了提交按钮的样式，包括点击事件绑定等功能。
JavaScript代码
function checkCaptcha() {
var inputText = document.getElementById("captchaInput").value;
if (inputText === "") {
alert("请输入验证码！");
} else {
// 在这里执行验证码验证逻辑
// 可以发送AJAX请求到服务器进行验证或使用正则表达式进行验证等操作
console.log("验证码输入正确！");
}
}
以上代码中的checkCaptcha()函数用于处理用户点击提交按钮后的验证操作。它首先获取用户在输入框中输入的验证码文本，并进行简单的非空判断。如果验证码为空，会弹出相应的提示框。否则，可以在代码中实现更复杂的验证逻辑，比如发送AJAX请求到服务器进行验证或使用正则表达式进行验证等操作。在这个示例中，只是简单地打印了一条验证码正确的消息到控制台。
这只是一个简单的示例网站，真实的验证码系统通常会更加复杂和安全。
