Question

我想知道，如果有这样的方式，编辑Hilios倒计时计时器如下所述：

我有一个功能，它可以正常工作，从日期开始倒计时（我想在单个视图中标记我确实有几个日期，其中使用了计时器，所以我不得不使用每个功能）：

$('[data-countdown]').each(function() {
    var $this = $(this);
    var finalDate = $(this).data('countdown');
    $this.countdown(finalDate, function(event) {
        $this.html(event.strftime('%D days %H:%M:%S'));
    });
});

这就是问题所在。由于这个脚本的工作原理是“ staticly ” - 我的意思是静态 - 它是从html获取的日期，并在脚本加载时将其传递给脚本。

我的应用程序动态，因此日期也会动态更改。

所以问题是：是否有这样的方法来编辑此脚本，以处理动态数据 - 当在网站上更新某些数据时，它还会在倒数计时器中更新该数据。

祝你好运！ PS。

Answer 1

请查看MutationObserver。

＆＃13;

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = {
  attributes: true,
  attributeFilter: ['data-timer'],
  attributeOldValue: true,
};

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
  for (var mutation of mutationsList) {
    console.log('CHANGED', mutation.oldValue);
  }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
//observer.disconnect();

＆＃13;

<div id="some-id" data-timer="123">hello</div>
<button onclick="document.getElementById('some-id').setAttribute('data-timer', +new Date())">change</button>

＆＃13;

除了其他人，Hilios倒数计时器

1 个答案: