Question

我正在尝试设置一个设置倒计时的函数，然后在它达到0时触发另一个函数/事件。我将它与HTML链接以设置各种按钮选择器，以便能够增加倒计时1,2或3个刻度。

问题是我可以通过添加document.getElementById("timer").innerHTML = myTime.curTime + "/" + myTime.maxTime让页面显示最小/最大计时器而没有任何问题在HTML文档的顶部，但我不能让它更新curTime，并且curTime似乎永远不会在对象内更新。这只是我构建它的问题吗？或者我应该以不同的方式接近这个？

这是我到目前为止所拥有的：（链接到jsfiddle：http://jsfiddle.net/g4Lu3n43/）

//set the initial value of timer
var timerDown = 0

//set up the countdown constructor
function Countdown(name, baseTime, inc) {
    this.name = name;
    this.timer = baseTime;
    this.increment = inc;
    this.maxTime = maxTime();
    this.curTime = curTime();
}

//set up the functions for the Countdown prototype
Countdown.prototype = {
    maxTime: function() {
        return (this.timer + this.increment) * 2;
    },
    curTime: function() {
        return maxTime - timerDown;
    }
}

//set up the function to now de-increment the timer to 0
function deIncrement(numInc) {
    timerDown += numInc;
    if (myTime.curTime <= 0 ) {
    alert("You've run out of time!");
    } else { 
        updateTimer();
    }
}

//set up the countdown object
var myTime = new Countdown("Timer", 10, 2);

//set up the function to update the div on the HTML page
function updateTimer() { 
    var timer = document.getElementById("timer") 
    timer.innerHTML = myTime.curTime + "/" + myTime.maxTime;
}

window.onload = updateTimer();

它的HTML部分：

<div id="timer">Time will go here</div>
<input type="button" id="inc1" onclick="deIncrement(1); return false" value="Coundown by 1">
<input type="button" id="inc2" onclick="deIncrement(2); return false" value="Coundown by 2">
<input type="button" id="inc3" onclick="deIncrement(3); return false" value="Coundown by 3">
<input type="button" id="inc4" onclick="deIncrement(4); return false" value="Coundown by 4">

Answer 1

您的代码存在一些问题......

首先，您需要将函数设置为window.onload，而不是调用函数并将结果放入window.onload。

接下来，正如briosheje所说，你不能将maxTime作为属性和同一对象的功能（即使你正在使用原型）。只需使用该功能每次都能获得最新值。

请务必使用this.myFunction()（而非myFunction()）来使用您当前所在对象中的其他功能/对象。

最后，您的jsFiddle需要直接在<head>元素中运行，以便使用window.onload和从内联HTML属性（即deIncrement）访问的命名函数。这是在页面左上角设置的配置选项。

请参阅更新的jsFiddle：http://jsfiddle.net/g4Lu3n43/2/

object方法不修改同一对象中的其他属性

1 个答案: