如果倒计时结束，JavaScript 显示 div 并添加类答案

【问题标题】：JavaScript show div and add class if countdown has ended如果倒计时结束，JavaScript 显示 div 并添加类
【发布时间】：2018-03-06 03:21:06
【问题描述】：

我有一些带有倒计时代码的 JavaScript，当它达到 0 时，它会显示文本“结束”。

发生这种情况时，我需要在两个 div 上显示块并将一个类添加到另一个 div。

这里是JS代码：

function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            element.innerHTML = "Ended";
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + 'h ' + twoDigits( mins ) : mins) + 'm ' + twoDigits( time.getUTCSeconds() + 's' );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}

countdown( "countdown", 1, 5 );
countdown( "countdown2", 100, 0 );

HTML：

<div id="countdown"></div>

这是一个小提琴：https://jsfiddle.net/vek5808u/8/

任何帮助都会很棒

谢谢

【问题讨论】：

我看不到 jQuery jsfiddle.net/mplungjan/2L6zx7du element.innerHTML = "Ended"; document.querySelector(".img-message").style.display="block";
尝试为多个类执行此操作，包括显示块和无选项，但它似乎只做一个？所以它只会将样式添加到一个类而不是多个？谢谢
看起来你在你的应用程序中使用了 jquery，为什么不在你的计时器中简单地说 $('.messaging').attr('style','display: block') if block？
现在隐藏/显示工作正常，我只是使用了不同的类名。倒计时结束后，如何在页面上的某个 div 中添加一个类？
@John 你可以用document.querySelector(".img-container").className += " opacity-overlay"; 添加一个类，看看我的回答，

标签： javascript html css

【解决方案1】：

在 if 块内

 if ( msLeft < 1000 ) {

     document.querySelector(".messaging").style.display="block";
     document.querySelector(".img-message").style.display="block";

     document.querySelector(".img-container").className += " opacity-overlay";

     element.innerHTML = "Ended";
 }

https://jsfiddle.net/vek5808u/36/

【讨论】：

【解决方案2】：

从时间开始到显示时间有一点延迟。您可能需要尝试一下，但过程非常简单。

我将Countdown 类基于某人在另一个问题中创建的Repeater 类。

为了方便使用，我什至将它封装在一个 jQuery 插件中。

const twoDigits = n => n <= 9 ? '0' + n : n;
const dispTime = t => {
  var h = t.getUTCHours(), m = t.getUTCMinutes();
  return (h ? h + 'h ' + twoDigits(m) : m) + 'm ' + twoDigits(t.getUTCSeconds() + 's')
};

function Countdown(minutes, seconds, callbackFn, successFn, scope) {
  var self = this;
  this.delay = 1000;
  this.timer = setTimeout(function() { self.run(); }, this.delay);
  this.callbackFn = callbackFn;
  this.successFn = successFn;
  this.endTime = new Date().getTime() + 1000 * (60 * minutes + seconds);
  this.scope = scope || self;
}
Countdown.prototype.run = function() {
  var self = this, timeRemaining = this.timeRemaining();
  this.callbackFn.call(this.scope, timeRemaining);
  if (timeRemaining < this.delay - 1) {
    this.successFn.call(this.scope);
  } else {
    this.timer = setTimeout(function() { self.run(); }, this.delay);
  }
};
Countdown.prototype.timeRemaining = function() {
  return this.endTime - new Date().getTime();
};

(function($) {
  $.fn.countdown = function(minutes, seconds, callbackFn, successFn) {
    new Countdown(minutes, seconds, callbackFn, successFn, this);
    return this;
  };
})(jQuery);

$('#countdown').countdown(0, 10, function(msRemaining) {
  this.html(dispTime(new Date(msRemaining)));
}, function() {
  this.html("Ended");
  $('.img-message').show();
});

.messaging,
.img-message {
  display: none;
}

.img-container.opacity-overlay {
  opacity: 0.6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="countdown"></div>
<div class="messaging">
  <p>messaging here</p>
</div>
<div class="img-container">
  <div class="img-message">image message here</div>
</div>

【讨论】：