Javascript 中的倒计时时钟定时器 Canvas HTML5

Question

在 javascript (createJS) 中为 Flash Canvas HTML5 进行简单的倒计时，我收到以下错误：

file_Canvas.js:318 Uncaught TypeError: Cannot read property 'dtxt_days' of undefined

该错误特定于第 this.mc_counter.dtxt_days.text = days; 行及其下方的第 3 行。

我做错了什么？

这是 js：

this.mc_counter.dtxt_days.text = "";
this.mc_counter.dtxt_hours.text = "";
this.mc_counter.dtxt_mins.text = "";
this.mc_counter.dtxt_secs.text = "";

var end = new Date('10/19/2015 10:1 AM');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
    var now = new Date();
    var distance = end - now;
    
    this.days = Math.floor(distance / _day);
    this.hours = Math.floor((distance % _day) / _hour);
    this.minutes = Math.floor((distance % _hour) / _minute);
    this.seconds = Math.floor((distance % _minute) / _second);

    this.mc_counter.dtxt_days.text = days;
    this.mc_counter.dtxt_hours.text = hours;
    this.mc_counter.dtxt_mins.text = minutes;
    this.mc_counter.dtxt_secs.text = seconds;
}

    
timer = setInterval(showRemaining, 1000);

console.log(timer);

Answer 1

您将错误代码行中的变量分配给不存在的东西。

this.days != days

相反，请确保您获得刚刚分配给 this 的属性。

this.mc_counter.dtxt_days.text = this.days;
this.mc_counter.dtxt_hours.text = this.hours;
this.mc_counter.dtxt_mins.text = this.minutes;
this.mc_counter.dtxt_secs.text = this.seconds;

此外 - this 并不是指您认为的那样。由于showRemaining是一个函数，所以里面代码中的this实际上是指showRemaining。有几种方法可以解决这个问题。这可以说是最简单的一个：

var self = this;
function showRemaining() {
   self.days = ...
   self.mc_counter.dtxt_days.txt = ...
}

那只是简单地存储了对外部 this 的引用。或者，您可以执行以下操作：

timer = setInterval(showRemaining.call(this), 1000);

它将 showRemaining 内部的 this 分配给外部 this。

Javascript 中的倒计时时钟定时器 Canvas HTML5

Countdown clock timer in Javascript for Flash Canvas HTML5

javascript

html

canvas

createjs