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

时间:2015-04-21 18:18:33

标签: javascript html object methods

我正在尝试设置一个设置倒计时的函数,然后在它达到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">

1 个答案:

答案 0 :(得分:0)

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

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

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

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

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

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