首页实现一个滑动验证码代码

实现一个滑动验证码代码

时间: 2024-09-15 07:04:05 浏览: 49

实现一个简单的滑动验证码（CAPTCHA）需要结合图像处理、用户输入验证和一些基本的前端技术。以下是一个基于JavaScript和HTML的基本示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>滑动验证码</title> <style> #captcha { position: relative; width: 200px; height: 50px; overflow: hidden; } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: lightgray; transition: transform 0.5s ease; } </style> </head> <body> <input type="text" id="captchaInput" placeholder="请输入验证码"> <div id="captcha"> <img src="generate-captcha-image.php" class="slider"> </div> <button onclick="checkAnswer()">提交</button> <script> function generateCaptcha() { var slider = document.querySelector('.slider'); // 生成随机位置并应用到slider上 var newX = Math.floor(Math.random() * (document.body.clientWidth - slider.offsetWidth)); slider.style.transform = `translateX(${newX}px)`; } function checkAnswer() { var input = document.getElementById('captchaInput').value; if (input === '预期的答案') { // 替换为实际的滑块正确位置对应的数字 alert('验证码正确!'); } else { alert('验证码错误，请重试!'); } } // 每隔一段时间生成新的验证码 setInterval(generateCaptcha, 5000); </script> </body> </html> ``` 这个例子中，`generateCaptcha()`函数会在页面加载后或每隔5秒生成一个新的滑动验证码，通过改变滑块的位置模拟动态验证码。用户输入验证时，会检查输入是否与滑块静止时显示的数字一致。请注意这只是一个基础示例，实际应用中可能会更复杂，比如使用服务器生成验证码图片，并可能涉及防机器人攻击的额外措施。

阅读全文