Question

我为倒计时时钟创建了以下脚本。我想动态创建HTMLElement（span）并使用window.setInterval更新innerHTML; 我的问题是更新当前日期而不创建新的跨度组。

这是我的代码：

var CountdownClock;
(function (CountdownClock) {
    var Countdown = (function () {
        function Countdown(id, endDate, message) {
            this.id = id;
            this.endDate = endDate;
            this.message = message;
        }
        Countdown.appendChildElement = function (DOMNode, tagName) {
            var child = document.createElement(tagName);
            DOMNode.appendChild(child);
            return child;
        };
        Countdown.prototype.getTimeRemaining = function (enddate) {
            var t = Date.parse(enddate) - Date.parse(new Date().toString());
            var seconds = Math.floor((t / 1000) % 60);
            var minutes = Math.floor((t / 1000 / 60) % 60);
            var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
            var days = Math.floor(t / (1000 * 60 * 60 * 24));
            return {
                'total': t,
                'days': days,
                'hours': hours,
                'minutes': minutes,
                'seconds': seconds
            };
        };
        Countdown.prototype.drawCountdown = function (id, enddate) {
            var container = document.getElementById(id);
            var timeRemaining = this.getTimeRemaining(enddate);
            var update = function () {
                for (var key in timeRemaining) {
                    if (timeRemaining.hasOwnProperty(key)) {
                        var span = Countdown.appendChildElement(container, 'span');
                        span.setAttribute('class', key);
                        span.innerHTML = timeRemaining[key];
                    }
                }
            };
            return update();
        };
        Countdown.prototype.initialize = function () {
            var that = this;
            this.drawCountdown(that.id, that.endDate);
            var update = setInterval((function () {
                that.drawCountdown(that.id, that.endDate);
            }), 1000);
            // var updateCountdown = setInterval(
            //     (function() {
            //         that.initializeCountdown(that.id, that.endDate, that.message)
            //     }), 1000);
        };
        return Countdown;
    })();
    CountdownClock.Countdown = Countdown;
})(CountdownClock || (CountdownClock = {}));

jsfiddle

Answer 1

创建一个删除旧范围的功能

https://jsfiddle.net/7vjf4y5u/1/

我将以下功能添加到CountdownTimer原型

/* Add a method to remove the old span*/
Countdown.prototype.removeSpan = function(){
    if(this.span){
        this.span.remove();
  }
};

更新以下功能，在创建新范围后调用它

Countdown.prototype.drawCountdown = function(id, enddate) {
  var self = this; //Added this to reference in the update function
  var container = document.getElementById(id);
  var timeRemaining = this.getTimeRemaining(enddate);
  var update = function() {
    for (var key in timeRemaining) {
      if (timeRemaining.hasOwnProperty(key)) {
        var span = Countdown.appendChildElement(container, 'span');
        span.setAttribute('class', key);
        span.innerHTML = timeRemaining[key];
        self.removeSpan(); //Remove the old span
        self.span = span; //Set the new span
      }
    }
  };
  return update();
};

如果您不希望每次都进行新的跨度，只需保留对span的引用并更新其innerHTML

https://jsfiddle.net/s3yzLvee/1/

Countdown.prototype.drawCountdown = function(id, enddate) {
  var self = this;
  var container = document.getElementById(id);
  var timeRemaining = this.getTimeRemaining(enddate);
  var update = function() {
    for (var key in timeRemaining) {
      if (timeRemaining.hasOwnProperty(key)) {
        /* Save a reference to the span*/
        if(!self.span){
            self.span = Countdown.appendChildElement(container, 'span');
        }

        //Operate on the referenced span
        self.span.setAttribute('class', key);
        self.span.innerHTML = timeRemaining[key];
      }
    }
  };
  return update();
};

如何使用window.setInterval动态创建HTMLElement并更新innerHTML

1 个答案: