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

如何让原型在JavaScript中使用构造函数,javascript,prototype,Javascript,Prototype,我想创建StartCountdownConstructor函数的原型函数,以了解如何正确地完成此操作 这是没有原型的完整版本 而不是 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

我想创建
StartCountdown
Constructor函数的原型函数,以了解如何正确地完成此操作

这是没有原型的完整版本 而不是

 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.closeInputField;
注意:确保使用
()
调用函数。没有它们,您只是引用函数,而不是调用它


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

创建函数后,只需附加到现有原型即可

this.closeInputField();

在看了你的小提琴之后,我也看到了一些其他需要改进的地方。这些只是一些你想用的想法

计时器

多定时器

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

对于(var i=0,len=timers.length;iDefine在定义构造函数后定义原型,而不是在其中。@PaulS。我也这么认为,因为括号似乎有点错,但原型不在构造函数中。如果您使用的是希望以后访问的变量,则应使用
this.minutes
而不是“var minute”来指定它们或者,一旦创建了实例,它们就不可用。可以在此处找到使用构造函数和原型的介绍:
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();
};
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]);
}