如何实现js加减法验证码

在网页开发中，为了防止恶意攻击和自动化脚本的滥用，验证码是一种常见的安全措施。其中，js加减法验证码因其简单有效且用户体验较好而被广泛应用。下面将介绍如何实现js加减法验证码。

我们需要在HTML页面中创建用于显示验证码的元素和用户输入的文本框。可以使用<span>标签来显示验证码题目，使用<input>标签创建输入框。例如：

<span id="captcha"></span>
<input type="text" id="captchaInput">
<button onclick="checkCaptcha()">验证</button>

接下来，使用JavaScript生成加减法验证码。可以通过以下代码实现：

function generateCaptcha() {
    var num1 = Math.floor(Math.random() * 10);
    var num2 = Math.floor(Math.random() * 10);
    var operator = ['+', '-'][Math.floor(Math.random() * 2)];
    var captchaText;
    if (operator === '+') {
        captchaText = num1 +' + '+ num2 +' = ';
        document.getElementById('captcha').innerHTML = captchaText;
    } else {
        captchaText = num1 +' - '+ num2 +' = ';
        document.getElementById('captcha').innerHTML = captchaText;
    }
}
window.onload = generateCaptcha;

上述代码会在页面加载时随机生成一个加减法验证码题目。

然后，编写验证函数来检查用户输入的答案是否正确：

function checkCaptcha() {
    var captchaText = document.getElementById('captcha').innerHTML;
    var userInput = document.getElementById('captchaInput').value;
    var numbers = captchaText.match(/\d+/g);
    var operator = captchaText.match(/[+\-]/)[0];
    var result;
    if (operator === '+') {
        result = parseInt(numbers[0]) + parseInt(numbers[1]);
    } else {
        result = parseInt(numbers[0]) - parseInt(numbers[1]);
    }
    if (parseInt(userInput) === result) {
        alert('验证成功');
    } else {
        alert('验证失败，请重新输入');
        generateCaptcha();
    }
}

通过以上步骤，我们就成功实现了js加减法验证码。它能够有效地增加网站的安全性，同时为用户提供相对友好的验证体验。开发者可以根据实际需求对代码进行进一步的优化和扩展。