HTML

Question

我正在使用javascript制作数字保险锁，用户需要按正确的顺序填写四个数字才能解锁页面上的内容。

该页面由一个文本框组成，他们填写10以下的数字，然后按一个按钮发送该数字。他们必须这样做4次，如果数字和顺序是正确的（例如4 5 2 7），它将解锁并显示图片。

我尝试使用“if”结构，但似乎无法想出正确的方法。

function checkingcombination (){
      if(numberpushed == 4){
        if(numberpushed == 5){
          if(numberpushed == 2){
            if(numberpushed == 7){
               alert("lock unlocked, welcome");
            }
            else{
             alert("wrong combination");
             return;
            } 
          }
          else{
           alert("wrong combination");
           return;
          }
        }
        else{
          alert("wrong combination");
          return;
        }
      }
      else{
        alert("wrong combination");
        return;
      }
}

Answer 1

试试这个：

function checkingcombination (array){
  var rightCombo = [4,5,2,7];

  for(i = 0; i<userCombo.length; i=++){
    if(userCombo[i] !== rightCombo){
        alert('"' + userCombo[i] + '" is wrong number!');
        return false;
    } else {
        alert('Right combo!');
        return true;
    }
  }
}

Answer 2

如果你想使用if语句，你需要让你的函数接受一些参数。您需要将HTML页面上的输入值传递给函数。像这样的东西！

function checkingcombination (firstNumber, secondNumber, thirdNumber, fourthNumber) {
  if(firstNumber == 4){
    if(secondNumber == 5){
      if(thirdNumber == 2){
        if(fourthNumber == 7){
           alert("lock unlocked, welcome");
        }
       ...


var firstNumber = document.getElementById('firstNumber').value;
var secondNumber = document.getElementById('secondNumber').value;
var thirdNumber = document.getElementById('thirdNumber').value;
var fourthNumber = document.getElementById('fourthNumber').value;


function validate() {
  checkingcombination(firstNumber, secondNumber, thirdNumber, fourthNumber)

}

在您的html中，您将需要那些查询选择器可以通过这些ID引用的输入

<input id="firstNumber" type="number">
<input id="secondNumber" type="number">
<input id="thirdNumber" type="number">
<input id="fourthNumber" type="number" onkeyup="validate()">

Answer 3

如果你有类似的东西（根据你的描述）：

<input type="number" id="digit"><button onclick="checkingcombination();">OK</button>

你可以这样做：

var digits=[];
function checkingcombination() {
    var input=document.getElementById("digit");
    var digit=input.value;

    //TODO validate digit

    //store each digit in the array
    digits.push(digit);

    //once there are 4 digits stored, check if the code is valid
    if(digits.length==4) {
        var correctAnswer=[4,5,2,7];
        if(digits.join("")==correctAnswer.join("")) {
            alert("lock unlocked, welcome");
            return;
        } else {
            alert("wrong combination");
        }
        //clear digits to enter a new combination
        digits=[];                
    }

    //clear the textbox to enter the next digit
    input.value="";
    input.focus();
}

Answer 4

嗨，这是我的解决方案。

['fun1','fun2',...,'funN']

的javascript：

<input type="number" min="0" max="9" class="vault-value" />
<input type="number" min="0" max="9" class="vault-value"/>
<input type="number" min="0" max="9" class="vault-value"/>
<input type="number" min="0" max="9" class="vault-value"/>
<button onclick="validateLock()">VALIDATE</button>

<div>
  <label>Result: </label>
  <div id="result"></div>
</div>

实施例： http://codepen.io/xszaboj/pen/NdjLNo?editors=1010

说明：

从输入中获取值并再次匹配validaCombination数组。如果所有值都匹配，则为正确组合，否则为错误

安全建议

我希望这只是一个有趣的项目而不是严肃的事情。因为每个人都可以读你的组合并检查你的“秘密号码”。

Answer 5

尽管这个应用存在巨大的安全漏洞，但我假设你只是想学习所以我会忽略它。

当你运行if语句时，它将检查逻辑是否为真，并且只在内部运行代码，如果它是真的。所以基本上，你的其余if语句都会被忽略。

让我们想想另一种方法。让我们说你创建了2个数组。一个是实际组合，另一个是试验。只有当您的试验等于与正确组合相同的长度时，才会运行一个函数。

当该函数运行时，它会将您当前的输入文本附加到试验数组，重置文本框中的文本，然后检查试用的长度并将其与组合进行比较。

您必须单击该按钮4次才会收到消息。如果不一样，则试用阵列擦干净。

这是打开开发人员工具的好时机，并在控制台中查看变量名称，并在每次点击时查看它们。

HTML

<label for="combo_submit">Enter number:</label>
<input type="text" id="combo_input">
<button type="button" id="combo_button">Click Me!</button>

的Javascript

<script>
    var input = document.getElementById("combo_input");
    var button = document.getElementById("combo_button");

    var combo = [1,2,3,4];
    var trial = [];

    button.addEventListener("click", checkComboNumber);

    function checkComboNumber() {

        var number = Number(input.value);

        trial.push(number)

        input.value = "";
        input.focus();

        if (trial.length === combo.length) {
            if (combo === trial) {
                msg = "Well... im impressed";
            } else {
                msg = "Stop trying to guess!";
                trial = [];
            }
            alert(msg);
            console.log(msg);
        }
    }


</script>

如何在javascript中查看一系列数字

5 个答案:

HTML

的Javascript