I’m running an analog SVG clock backwards as a countdown timer, and I want the hands to rotate in response to to two different functions. A rapid tick every 1/3 second, and then a “time synchronization” every 12 seconds to correct any drift.

The variables “minutes” and “seconds” will be used in the animateTransform property of the hands.

I declared “seconds” and “minutes” globally but only the synch() function is reaching them. The freewheelin() function doesn’t update it. I get “NaN” displaying seconds in that function. The timer itself is online now but I can’t set the hands with the current script, so this script will hopefully make it work.

I know this is some silly syntax thing but it’s beating me.

// Set the date we're counting down to
var countDownDate = new Date("May 17, 2022 21:22:05").getTime();
minutes = 0, seconds = 0, ms = 0;

// Update the count down every 12 seconds
function synch() {

  // Get today's date and time
  var now = new Date().getTime();
   
  // Find the distance to count down
  var distance = countDownDate - now;
   
  // Time calculations for , hours, minutes and seconds
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  var ms = new Date(now).getMilliseconds();
   
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s " + ms;
   
  // If the count down is over, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
  return minutes, seconds, ms;
};

setInterval(synch, 12000);

synch();

function freewheelin() {

document.getElementById("unsynched").innerHTML = seconds;
 seconds = seconds - 0.333333
};

setInterval(freewheelin,333);