如何将计时器元素保持在同一行并在完成后闪烁？

Posted 2021-04-24

我正在为jQuery使用Simple Timer插件，并有两个问题：

1. 我不需要计时器中的新行。如何在“00:00:00”之类的一行显示它而不是像下面图片中的结果？
2. 定时器完成后，如何让定时器以红色闪烁？

---

这是我的代码：

<script src="./jquery.js"></script>
<script src="./jquery.simple.timer.js"></script>

<div class="timer-1" data-seconds-left="20"></div>

<script>
  $(function(){
      $('.timer-1').startTimer({
          onComplete: function(element){
            element.addClass('is-complete');
          },
      });
  });
</script>

这是结果：

答案

基于GitHub上的examples和demos：

要将所有时间元素保持在同一条线上，您可以float它们。 要在完成后使计时器闪烁，您可以使用CSS animations。

这是一个演示：

$('.timer-1').startTimer({
  onComplete: function(element) {
    element.addClass('is-complete');
  },
});

.timer-1 {
  font-size: 2em;
}

.jst-hours,
.jst-minutes,
.jst-seconds {
  float: left;
}

.is-complete {
  color: red;
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
  -webkit-animation-duration: .7s;
}

@-webkit-keyframes blinker {
  from {
    opacity: 1.0;
  }
  to {
    opacity: 0.0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-simple-timer@1.0.1/jquery.simple.timer.js"></script>

<div class="timer-1" data-seconds-left="3"></div>

以上是关于如何将计时器元素保持在同一行并在完成后闪烁？的主要内容，如果未能解决你的问题，请参考以下文章

使用Bootstrap响应式设计使两个html元素保持在同一行

如何在同一行获得两个日期选择器？

如何将两个 div 保持在同一行？

如何使 ASP CheckBoxList 标签与复选框保持在同一行

如何将 G+ 按钮和 facebook like 按钮对齐在同一行？

如何强制内联 div 保持在同一行？