Question

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

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

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

如果你们能帮助我改进代码，我会很高兴，因为我觉得我写得非常虚伪。非常感谢!!!

请看一下我的小提琴代码:) 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

只需在onClick按钮

上添加reset个活动即可

在内部，您必须生成新的数字，总数，明确的问题和明确的输入

$('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
$("#reset").on("click", function() {
  randomNum1 = Math.ceil(Math.random() * maxNum);
  randomNum2 = Math.ceil(Math.random() * maxNum);
  total = randomNum1 + randomNum2;
  $("#question").empty();
  $("#ans").val('');
  $("#question").prepend(randomNum1 + " + " + randomNum2 + "=");
});

* {
  padding: 0;
  margin: 0;
}
html,
body {
  font-family: 'Open Sans';
  font-weight: lighter;
  font-size: 12px;
  width: 100%;
  height: 100%;
}
#success,
#fail {
  display: none;
}
#message,
#success,
#fail {
  margin-top: 10px;
  margin-bottom: 10px;
}
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
p {
  display: inline;
  margin-right: 5px;
}
input,
button {
  font-family: 'Open Sans';
  font-weight: lighter;
  font-size: 12px;
}
input {
  border: 1px solid #FFBBD7;
  width: 30px;
  height: 20px;
  text-align: center;
}
button {
  border: none;
  border-radius: 1.5em;
  color: #FFF;
  background: #FFBBD7;
  padding: 2.5px 10px;
  width: 75px;
  height: 30px;
  cursor: pointer;
  transition: background .5s ease-in-out;
}
button:hover:enabled {
  background: #303030;
}
button:disabled {
  opacity: .5;
  cursor: default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="question"></p>
<input id="ans" type="text">
<div id="message">Please verify.</div>
<div id="success">Validation complete :)</div>
<div id="fail">Validation failed :(</div>
<button type="submit" value="submit">Submit</button>
<button type="reset" id="reset" value="reset">Reset</button>

Answer 2

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

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

Answer 3

你可以这样做，添加这段代码：

$('#reset').click(function(e){
  randomNum1 = Math.ceil(Math.random()*maxNum);
  randomNum2 = Math.ceil(Math.random()*maxNum);
  total =randomNum1 + randomNum2;
   $( "#question" ).html( randomNum1 + " + " + randomNum2 + "=" );
});

在这种情况下，

#reset是您的重置按钮。你应该给它那个ID，或者根据你最喜欢的方式改变选择。点击后，您将重置变量，并从question更改HTML。

我是通过复制代码来实现的，但您可能需要为它创建一个函数，因为您多次使用它。

简单的“数学”CAPTCHA

3 个答案: