Flipclock to countup for a timer duration

Question

I want the flipclock to countup instead of down & be able to stop & reset like a stopwatch. I have found plenty of flip clock countdown timers where they count down to a certain duration (i.e. 30 minutes). I was wondering how I can make it countup to a certain duration instead of a date so it can stop & reset.

I borrowed a sample from 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
    });

Unfortunately, I believe the site is down to be taken as reference.

Example: if i replace diff with 30 seconds. It would count from 30 instead of to 30 seconds.

Answer 1

Ok, here's what worked for me:

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>