添加进度条到倒计时

Question

我正在使用 flipclockjs 进行简单的倒计时。我想要做的是添加一个与倒计时同步的进度条。我试过了，但我连秒数都不知道。

希望你能帮助我。

var clock = $('.my-clock').FlipClock(10, {
  countdown: true,
  callbacks: {
    stop: function() {    
      setTimeout(function(){
        clock.setTime(10); // proceeding time
        clock.start();
      },1000);
    }
  }
});

.my-clock {
  text-align:center;
  width:auto;
  display: inline-block;
}
.center {
  text-align:center;
  
}
.progressBar{
  margin: 0 auto;
  width: 400px;
  height: 6px;
  border-radius: 3px;
  background-color: #222;
}
.progress{
  background-color: green;
  height: 100%;
  width: 30%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>

<div class="center">
  <div class="my-clock"></div>
  <div class="progressBar">
    <div class="progress"></div>
  </div>  
</div>

Answer 1

好吧，如果你参考 FlipClock 的文档，每个间隔都会调用间隔回调，我做了一些 dom 操作来更新进度条。

let time = 20;
let progress = 0; let counter = 0
var clock = $('.my-clock').FlipClock(time, {
  countdown: true,
  count: 1,
  callbacks: {
    stop: function() {
      setTimeout(function(){
        clock.setTime(time); // proceeding time
        clock.start();
      },1000);
    },
    interval: function() {
      counter && (progress+=100/time);
      counter ++;
      $('.progressBar .progress').width(progress+ '%');
      if(progress >= 100) {
        progress = 0; counter = 0;
        this.stop()
      }
    }
  }
});

.my-clock {
  text-align:center;
  width:auto;
  display: inline-block;
}
.center {
  text-align:center;
  
}
.progressBar{
  margin: 0 auto;
  width: 400px;
  height: 6px;
  border-radius: 3px;
  background-color: #222;
}
.progress{
  background-color: green;
  height: 100%;
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>

<div class="center">
  <div class="my-clock"></div>
  <div class="progressBar">
    <div class="progress"></div>
  </div>  
</div>

添加进度条到倒计时

Add progress bar to countdown

jquery

flipclock