我正在尝试设置一个设置倒计时的函数,然后在它达到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">
答案 0 :(得分:0)
您的代码存在一些问题......
首先,您需要将函数设置为window.onload
,而不是调用函数并将结果放入window.onload
。
接下来,正如briosheje所说,你不能将maxTime
作为属性和同一对象的功能(即使你正在使用原型)。只需使用该功能每次都能获得最新值。
请务必使用this.myFunction()
(而非myFunction()
)来使用您当前所在对象中的其他功能/对象。
最后,您的jsFiddle需要直接在<head>
元素中运行,以便使用window.onload
和从内联HTML属性(即deIncrement
)访问的命名函数。这是在页面左上角设置的配置选项。
请参阅更新的jsFiddle:http://jsfiddle.net/g4Lu3n43/2/