JSFiddle - React, Tailwind, and code Playground

HTML

<h1><time>0</time></h1>
<button id="theButton">Send to other page</button>

<div id="animatedDiv"></div>

CSS

#animatedDiv {
    width:50px;
    height:50px;
    background-color:red;
    position:absolute;
    padding:20px;
}

JavaScript

var h1 = document.getElementsByTagName('h1')[0],
    seconds = 0,
    t;
function add() {
    seconds++;
    h1.textContent = seconds;
    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}

// Example of an animation that starts the timer when complete
$("#animatedDiv").animate({
        left: "+=50",
        top: "+=150",
        height: "100px",
        width: "200px"
      }, 4000, function() {          // define a callback function
          
        // Animation complete.
        $("#animatedDiv").html('Animation is done.<br />Timer starts <b>NOW</b>.<br /><br />Press s to stop the timer. <br />(first click on the document)');
          
        start();                    // Start the timer in the callback function
  });

// Example of a function that stops the timer
$(document).keypress(function( event ) {
  if ( event.which == 115 ) {       // when pressing s for 'stop'
     alert('You stopped the timer');
     stop();
  }
});

// button click function
$("#theButton").click(function() {
    window.open('http://www.yourpage.com/?time='+h1.textContent);
});

// start and stop functions
function start() {
    timer();
}

function stop() {
    clearTimeout(t);
}

// Written by Jean-Paul van Brakel
// in response to: http://stackoverflow.com/questions/27678604/start-a-timer-after-animation-has-finished