Question

 var StartCountdown = function () {

  //grab value from the input text field
  var minutes = document.getElementById("minutes").value;

  //check if the value passed is a number
  if (isNaN(minutes)) {
     timeDisplay.innerHTML = "Enter a numeric value";
     return;
  };

  //this variable will decrement
  secondsRemaining = minutes * 60;

  //the ticking function and the milisecond (1)
  // calls the method repeatedly
  intervalHandle = setInterval(tick, 1000);

  //hide the input field once we have the numeric value
  // document.getElementById("inputArea").style.display = "none";

     StartCountdown.closeInputField;

  };

  StartCountdown.prototype = {

       closeInputField: function() {
               document.getElementById("inputArea").style.display = "none";
       }
  }

我想创建StartCountdown构造函数的原型函数，以便了解这是如何正确完成的。

这是没有原型的完整版 http://jsfiddle.net/2nXbN/2/

Answer 1

而不是

StartCountdown.closeInputField;

您需要使用

调用该函数

this.closeInputField();

注意：请务必使用()来调用某个功能。没有它们，你只是引用该函数，而不是调用它。

您也不必以这种方式创建原型。

创建函数后，您只需附加到现有原型。

var StartCountDown = function() {
  // ...
};

StartCountDown.prototype.closeInputField = function() {
  // ...
};

看了看你的小提琴之后，我还看到了其他一些需要改进的地方。这些只是您可以根据自己的意愿使用的一些想法。

Here's a jsfiddle demo

定时器

var Timer = function(elem) {
  this.seconds = 0;
  this.elem     = elem;
  this.initialize();
};

Timer.prototype.initialize = function() {
  this.timer = document.createElement("span");
  this.timer.innerHTML = "0:00";

  this.input = document.createElement("input");

  this.button = document.createElement("button");
  this.button.innerHTML = "Submit";
  this.button.addEventListener("click", this.startTimer.bind(this));

  this.elem.appendChild(this.timer);
  this.elem.appendChild(this.input);
  this.elem.appendChild(this.button);
};

Timer.prototype.startTimer = function(event) {
  this.removeInput();
  this.seconds = parseInt(this.input.value) * 60;
  this.interval = window.setInterval(this.countDown.bind(this), 1000);
  event.preventDefault();
};

Timer.prototype.stopTimer = function() {
  this.updateTimer("Done!");
  window.clearInterval(this.interval);
};

Timer.prototype.updateTimer = function(text) {
  this.timer.innerHTML = text;
};

Timer.prototype.countDown = function() {
  if (this.seconds === 0) {
    return this.stopTimer();
  }

  this.updateTimer(this.timeRemaining(this.seconds));
  this.seconds--;
};

Timer.prototype.timeRemaining = function(seconds) {
  var minutes   = Math.floor(seconds/60),
      seconds   = seconds % 60,
      separator = seconds % 2 === 0 ? ":" : " ";

  if (seconds.toString().length < 2) {
    seconds = [0, 0, seconds].slice(-2).join("");
  }

  return minutes + separator + seconds;
};

Timer.prototype.removeInput = function() {
  this.input.remove();
  this.button.remove();
};

用法

找一个你想表现得像计时器的DOM元素（elem）并调用new Timer(elem)

var timer = document.getElementsByTagName("div")[0];
new Timer(timer);

多个计时器

var timers = document.getElementsByTagName("div");
for (var i=0, len=timers.length; i<len; i++) {
  new Timer(timers[i]);
}

如何在JavaScript中使用原型来构建构造函数

1 个答案: