将进度条添加到倒计时

Question

我正在使用flipclockjs进行简单的倒计时。我想做的是添加一个进度条，该进度条与倒数同步。我尝试这样做，但我什至无法获得秒数。

希望你能帮助我。

mat.inl.hpp:1274: error: (-215:Assertion failed) data && dims <= 2 && 
(rows == 1 || cols == 1) && rows + cols - 1 == n && channels() == 1 in 
function 'operator cv::Vec<_Tp, m>'

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%;
}

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>