Flash Canvas HTML5 Javascript 中的倒数时钟计时器

Posted 2023-03-05

【中文标题】Flash Canvas HTML5 Javascript 中的倒数时钟计时器

【英文标题】：Countdown clock timer in Javascript for Flash Canvas HTML5

【发布时间】：2016-02-10 22:22:22

【问题描述】：

在 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);

【问题讨论】：

你能把所有代码粘贴到某个地方吗？

检查 dtxt_days 是否设置正确。

谢谢，如果我执行this.mc_counter.dtxt_days.text = 38;

编辑您的标签。这不是 JavaScript。控制台日志在这里不起作用。尝试跟踪（）。编辑：等等。这是createjs。我从来没有做过这件事。

这不是 Flash AS3，它是 HTML5 的 Flash 画布 - 控制台日志工作正常，并在 chrome 控制台中输出。哦，我看到了你的编辑。是的，但是 createjs 文档并没有真正帮助 o.O :(

【参考方案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。

【讨论】：

谢谢。这不是答案，它不起作用。 this.mc_counter.dtxt_days.text 由于某种原因无法在函数内部工作。当我执行this.mc_counter.dtxt_days.text = "100"; 时，我的文本框会填充，当我执行this.days = 10; function showRemaining() this.mc_counter.dtxt_days.text = this.days; showRemaining();' I get the error Uncaught TypeError: Cannot read property 'dtxt_days' of undefined` 时：(

更新了我的答案@AgentZebra。那应该解决它。 :)