javascript - 简单 "Math"验证码

Question

大家。我是jquery初学者，想请教几个问题。

我正在为表单提交测试编写一个简单的数学验证码，我想每次按下“重置按钮”时生成一组新的随机数。

但是当我用谷歌搜索解决方案时，大多数人都在尝试重新加载页面或重新加载整个功能，所以我想问是否有办法做到这一点。

如果你们能帮助我改进代码，我会非常高兴，因为我认为我写的很傻。非常感谢!!!

请在 fiddle 中查看我的代码:) https://jsfiddle.net/v7bcjj1q/#&togetherjs=2nOVnkI34j

我的代码:

$(document).ready(function(){

    $('button[type=submit]').attr('disabled','disabled');

    var randomNum1;
    var randomNum2;

    //set the largeest number to display

    var maxNum = 20;
    var total;

    randomNum1 = Math.ceil(Math.random()*maxNum);
    randomNum2 = Math.ceil(Math.random()*maxNum);
    total =randomNum1 + randomNum2;

    $( "#question" ).prepend( randomNum1 + " + " + randomNum2 + "=" );

    // When users input the value

    $( "#ans" ).keyup(function() {

        var input = $(this).val();
        var slideSpeed = 200;

        $('#message').hide();

        if (input == total) {

            $('button[type=submit]').removeAttr('disabled');
            $('#success').slideDown(slideSpeed);
            $('#fail').slideUp(slideSpeed);

        }

        else {

            $('button[type=submit]').attr('disabled','disabled');
            $('#fail').slideDown(slideSpeed);
            $('#success').slideUp(slideSpeed);

        }

    });

    // Wheen "reset button" click, generating new randomNum1 & randomNum2
});

Answer 1

为了可重用性，可以使用单独的函数来生成问题

var total;

function getRandom(){return Math.ceil(Math.random()* 20);}
function createSum(){
        var randomNum1 = getRandom(),
            randomNum2 = getRandom();
    total =randomNum1 + randomNum2;
  $( "#question" ).text( randomNum1 + " + " + randomNum2 + "=" );  
  //in case of reset
  $('#success, #fail').hide();
  $('#message').show();
}

在文档加载内部，可以调用该函数进行初始化并随后附加到点击事件

$(document).ready(function(){

    $('button[type=submit]').attr('disabled','disabled');

    //create initial sum
    createSum();
    // On "reset button" click, generate new random sum
    $('button[type=reset]').click(createSum);

    //....

更进一步，在一个函数中设置可见性，该函数(重新)检查 keyup 和 Reset 上的输入。 Example fiddle