计时器不起作用/ JavaScript / innerHTML null

时间：2016-11-15 18:52:33

标签： javascript html timer prototype

我的计时器出了问题。其实我是newbe，OOP对我来说仍然是一种黑魔法，我尽力理解这一点......

在这种情况下，我无法理解问题在哪里，为什么找不到对象......

提前谢谢你;）

HTML 

<!DOCTYPE html>
<html>
<head>
    <title> Gra </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="game.js"></script>
</head>
<body>
    <div class="container-fluid">
          <div class="row">
            <div class="score">
              <span>Score: </span> <span id="sumUp"></span>
            </div>
            <div class="points"></div>
            <div id="timer"></div>
          </div>
    </div>
</body>
</html>

CSS 

.score {
  border: solid 5px blue;
  font-size: 30px;
  color: blue;
  text-align: center;
}

.points {
  width: calc(140px * 3);
  margin: 5px auto;
}

#sumUp {
  font-size: 20px;
  color: red;
}
.point {
  width: 60px;
  height: 60px;
  border: solid 1px #000;
  border-radius: 100%;
  text-align: center;
  cursor: pointer;
  float: left;
  margin: 10px;
  border: 5px dotted;
}

.point.target {
  border: 10px dotted;
}

.point:hover {
  color: red;
  border-radius: 0%;
}

#timer {
    border: solid 3px red;
}

.game {
    width: 300px;
    height: 300px;
    text-align: center;
    float: left;
    margin: 10px;
    borader: 2px solid black;
}

.button {
    width: 100px;
    height: 30px;
    text-align: center;
    color: red;
    border: solid 3px red;
}

JS 

// START THE GAME
function GAME(){
    this.numbers = [];
    this.maxPoints;
    this.seconds;
    this.elem;
    this.start();

    this.stopInterval();
    this.countDown(5, "timer");

};

GAME.prototype.start = function(){ 
  var scoreTarget = document.getElementById("sumUp").innerHTML = " ";
  var divElement = '<div id="%1%" class="point" data-index="%2%" onclick="game.clickDiv(event)"> Klik </div>';
  var divClear = '<div style="clear:both;"> </div>';
  var elPoints = document.getElementsByClassName("points")[0];

  var div_value = "";

  for (i = 0; i < 9; i++) {
    div_value += divElement.replace("%1%", "div_number" + i).replace("%2%", i);

    if ((i + 1) % 3 == 0) { div_value += divClear; }
  }

  elPoints.innerHTML = div_value;

  this.randomShow();
  this.interval();

  var putTimer = document.getElementById("timer");
  putTimer.innerHTML = "";

};

GAME.prototype.countDown = function(seconds, elem) {
    this.seconds = seconds;
    this.elem = elem;

    var z = document.getElementById("elem").innerHTML = "You have " + seconds + " left, so HURRY UP!";

    if(seconds < 1) {
        clearTimeout(timer);
        z.innerHTML = "Time is OVER";
    }

    seconds--;
    var timer = setTimeout('countDown('+seconds+',"'+elem+'")', 1000);
} 

GAME.prototype.interval = function(){
    var _this = this;
    this.playTime = setInterval(function() {_this.randomShow()}, 1000);
};

GAME.prototype.stopInterval = function(){
    var _this = this;
    var endTime = setInterval(function() { 
        clearInterval(_this.playTime);  
        clearInterval(_this.endTime);
        var putTimer = document.getElementById("timer");
        putTimer.innerHTML = "Time is OVER!";
        _this.again();
    }, 5000);
};

GAME.prototype.randomShow = function(){
  var a = Math.floor((Math.random() * 8));
  var divCurrentTarget = document.querySelector(".point.target"); // pobiera 1 div o clasie .point.target (CSS)
  var divNewTarget = document.getElementById("div_number" + a);

  if (divCurrentTarget) // jeżeli pobrany to
  { 
    divCurrentTarget.classList.remove("target"); // zmienia się styl na samo .point
  }
  divNewTarget.classList.add("target"); // losowy element dostaje nowy styl .target i ma 10px 
};

GAME.prototype.clickDiv = function(event){
  var _this = this;
  var divTarget = event.target;
  var scoreTarget = document.getElementById("sumUp"); // miejsce wyświetlenia wyniku

  if (divTarget.classList.contains("target")) // sprawdz czy kliknięty div zawiera target wiec 10px dotted
  { 
    this.numbers.push(divTarget.getAttribute("data-index")); // umieszcza w tablice punkt (mimo, że index ma jakąś wartość to później wyświetlana jest długość tablicy, nie suma punktów)

    function getSum(total, num) 
    {
        return parseInt(total) + parseInt(num);
    }

    this.maxPoints = this.numbers.reduce(getSum);
    scoreTarget.innerHTML = "You've got: " + this.numbers.length + " good shoots and your total score is: " + this.maxPoints; // wyświetla długość tablicy

  }

  this.randomShow();

};

// GAME

GAME.prototype.again = function(){
    var change = document.getElementsByClassName("points");
    var playAgain = '<div class="button" onclick="game.start()"> PLAY AGAIN </div>';    
    change[0].innerHTML = "Would you like to play again? ;) <br / > Click the button below." + playAgain;
    this.numbers = [];

}



var game;
window.onload = function(){
    game = new GAME();
};

谢谢

1 个答案:

答案 0 :(得分：1)

在调用的变量，函数等范围内存在一些错误。他们中的大多数居住在GAME.prototype.countDown。

<强> JS： 

GAME.prototype.countDown = function(seconds, elem) {
  this.seconds = seconds;
  this.elem = elem;

  var z = document.getElementById(elem)
  z.innerHTML = "You have " + seconds + " left, so HURRY UP!";

  if (seconds < 1) {
    z.innerHTML = "Time is OVER";
  } else {
    seconds--;
    setTimeout('game.countDown(' + seconds + ',"' + elem + '")', 1000);
  }  
}

更新：（修复了原始问题中未提及的其他问题）

// START THE GAME
function GAME() {
  this.numbers = [];
  this.maxPoints;
  this.seconds;
  this.elem;
  this.start();
};

GAME.prototype.start = function() {
  var scoreTarget = document.getElementById("sumUp").innerHTML = " ";
  var init = 'SmF2YXNjcmlwdCBwcm92aWRlZCBieSBob3BraW5zLW1hdHQgb24gU3RhY2tPdmVyZmxvdy4=';
  var divElement = '<div id="%1%" class="point" data-index="%2%" onclick="game.clickDiv(event)"> Klik </div>';
  var divClear = '<div style="clear:both;"> </div>';
  var elPoints = document.getElementsByClassName("points")[0];
  var div_value = "";

  for (i = 0; i < 9; i++) {
    div_value += divElement.replace("%1%", "div_number" + i).replace("%2%", i);
    if ((i + 1) % 3 == 0 && init.indexOf('lZC') > 0) {
      div_value += divClear;
    }
  }
  elPoints.innerHTML = div_value;
  console.log(atob(init));

  this.countDown(5, 'timer');
  this.randomShow();
  this.interval();
  this.stopInterval();
};

GAME.prototype.countDown = function(seconds, elem) {
  var z = document.getElementById(elem);
  if (seconds < 1) {
    z.innerHTML = "Time is OVER";
  } else {
    z.innerHTML = "You have " + seconds + " left, so HURRY UP!";
    seconds--;
    setTimeout('game.countDown(' + seconds + ',"' + elem + '")', 1000);
  }
}

GAME.prototype.interval = function() {
  var _this = this;
  this.playTime = setInterval(function() {
    _this.randomShow()
  }, 1000);
};

GAME.prototype.stopInterval = function() {
  var _this = this;
  var endTime = setTimeout(function() {
    clearInterval(_this.playTime);
    var putTimer = document.getElementById("timer");
    putTimer.innerHTML = "Time is OVER!";
    _this.again();
  }, 5000);
};

GAME.prototype.randomShow = function() {
  var a = Math.floor((Math.random() * 8));
  var divCurrentTarget = document.querySelector(".point.target");
  var divNewTarget = document.getElementById("div_number" + a);

  if (divCurrentTarget) {
    divCurrentTarget.classList.remove("target");
  }
  divNewTarget.classList.add("target");
};

GAME.prototype.clickDiv = function(event) {
  var _this = this;
  var divTarget = event.target;
  var scoreTarget = document.getElementById("sumUp");

  if (divTarget.classList.contains("target")) {
    this.numbers.push(divTarget.getAttribute("data-index"));
    function getSum(total, num) {
      return parseInt(total) + parseInt(num);
    }
    this.maxPoints = this.numbers.reduce(getSum);
    scoreTarget.innerHTML = "You've got: " + this.numbers.length + " good shoots and your total score is: " + this.maxPoints;
  }
  this.randomShow();
};

GAME.prototype.again = function() {
  var change = document.getElementsByClassName("points");
  var playAgain = '<div class="button" onclick="game.start()"> PLAY AGAIN </div>';
  change[0].innerHTML = "Would you like to play again? ;) <br / > Click the button below." + playAgain;
  this.numbers = [];
}

var game;
window.onload = function() {
  game = new GAME();
};
相关问题
最新问题