Question

我有一个功能，检查板是否有搜索元素。第一个脚本创建具有不同元素的板。电路板旁边的方块中的元素是用户必须在电路板上找到并单击它们的元素。

用户必须（尽快）点击所有搜索元素。单击元素功能检查板后，是否有更多元素。如果是，则没有任何反应，用户必须单击另一个。如果在船上没有搜索元素，则功能显示时间并创建新板。但是某些原因功能在页面加载后第一次才能正常工作。后置函数忽略了多个板载元素或者看到不再存在的元素。你能告诉我出了什么问题吗？

部分代码如下，并且有一个指向测试页面的链接。 http://doomini2.linuxpl.info/font/

谢谢

function secondStage() {
  createBoxes(59);
  var usingSet = [];
  var i = 0;
  var boxList = document.querySelectorAll("#board > div");
  createSet(usingSet, 20, shapes);
  (function paint() {
    if (i <= 59) {
      var curentBox = boxList[i];
      curentBox.className = usingSet[draw(20)];
      curentBox.style.color = colors[draw(colors.length - 5)];
      timeStop = setTimeout(paint, 50);
      i++;
    } else {
      var findShape = boxList[draw(59)];
      toFind.className = findShape.className;
      toFind.style.color = findShape.style.color;
      findBoxes(boxList);
      clearTimeout(timeStop);
    }
  })();
}

//function checks boxes to find a proper shape 
function findBoxes(boxList) {
  startTime = Date.now();
  board.addEventListener("mousedown", function (e) {
    if ((e.target.className === toFind.className)) {
      e.target.className = "correct";
      e.target.innerHTML = "OK";
      checkBoard();
    } else if (e.target.id === "board" || e.target.className === "correct") {

    } else {
      e.target.className = "false";
      e.target.innerHTML = "NO";
    }
  }, false);
  function checkBoard() {
    var condition = false;
    console.log(condition);
    for (var x = 0; x < boxList.length; x++) {
      if ((boxList[x].className === toFind.className)) {
        condition = true;
        console.log(condition);
      }
    }
    if (condition === false) {
      var clickTime = Date.now();
      var timeResult = parseFloat(((clickTime - startTime) / 1000).toFixed(3));
      lastResult.innerHTML = timeResult + "s";
      secondResult[secondResult.length] = timeResult;
      console.log(secondResult);
      displayResult(secondStage);
    }
  }
}

//function displaig results after every single round
function displayResult(stage) {
  cover.className = "";
  TweenMax.to("#lastResultDiv", 1, {ease: Back.easeOut, right: (winWidth / 4), });
  TweenMax.to("#go", 1, {ease: Back.easeOut, top: (winWidth / 3), onComplete: function () {
    goButton.addEventListener("click", function () {
      clear();
    }, false);
  }});
  //clear board and return to play                          
  function clear() {
    TweenMax.to("#lastResultDiv", 1, {ease: Back.easeIn, right: winWidth, });
    TweenMax.to("#go", 1, {ease: Back.easeOut, top: -100, onComplete: function () {
      cover.className = "hide";
      lastResultDiv.style.right = "-592px";
      toFind.className = "";
      board.innerHTML = "";

      if (firstStageRound === 10) {
        secondStage();
      } else if (secondStageRound === 5) {
        thirdStage();
      } else {
        stage();
      }
    }});
  }
}

Answer 1

未加载此文件http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js 尝试本地路径

JavaScript函数不正确

1 个答案: