Flipclock 计数计时器持续时间

Question

我希望翻转时钟能够像秒表一样进行计时而不是计时，并且能够停止和重置。我发现了很多翻转时钟倒数计时器，它们会倒计时到一定的持续时间（即 30 分钟）。我想知道如何让它计数到某个持续时间而不是日期，以便它可以停止并重置。

我从codepen那里借了一个样本。

HTML

<br />
<div class="clock" id="clock1"></div>

CSS

#clock1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    margin-left: -350px; /*set to a negative number 1/2 of your width*/
    height:100px;
    margin-top: -60px; /*set to a negative number 1/2 of your height*/
}

JS

// Just for running purpose
//=======================================
var start = new Date();
start.setDate(start.getDate());
start.setHours(0,0,0,0)
//======================================
var now   = new Date();

var diff = (now.getTime() - start.getTime()) / 1000;

    var clock = $('#clock1').FlipClock(diff, {
        clockFace: 'HourlyCounter',
        countdown: false,
        showSeconds: false
    });

不幸的是，我相信site 下来可以作为参考。

示例：如果我将 diff 替换为 30 秒。它将从 30 秒而不是 30 秒开始计算。

Answer 1

好的，这对我有用：

JS:

var clock = $('.clock').FlipClock(0, {
clockFace: 'DailyCounter',
countdown: false });
function reset(){
  clock = $('.clock').FlipClock(0, {
    clockFace: 'DailyCounter',
    countdown: false });
}
function stop(){
  clock.stop();
}
countup = setInterval(function() { 
     if(clock.getTime().time > 30) { 
       clock.stop();
       clearInterval(countup);
     }
    },500);

HTML:

<br />
<button style="width:200px; height: 50px;"onclick="reset()">Reset</button>
 <button style="width:200px; height: 50px;"onclick="stop()">Stop</button>                                                         
<div class="clock" id="clock1"></div>

Flipclock 计数计时器持续时间

Flipclock to countup for a timer duration

javascript

jquery

flipclock