JSFiddle - React, Tailwind, and code Playground

by kuraba

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <input type="time" id="schedule1" value="10:00:00" readonly />
    <div id="remaining"></div>
    <input type="time" id="schedule2" value="22:00:00" readonly />
    <div id="remaining2"></div>

JavaScript

function executeAction (target){
          console.log(target);
          //continue to next schedule
      };

      var date;
      var remaining = document.getElementById("remaining");
      var schedule1 = document.getElementById("schedule1").value.split(":");
      var target = schedule1[0];
      
      countD(document.getElementById("schedule1").value.split(":")[0],remaining);
      countD(document.getElementById("schedule2").value.split(":")[0],remaining2);
      
function countD(target,divloc){
setInterval(function () {
        date = new Date();
        var currenthours = date.getHours();
        var hours;
        var minutes;
        var secondes;
        if (currenthours != target) {
          if (currenthours < target) hours = target - 1 - currenthours;
          else hours = target + (24 - currenthours);
          minutes = 60 - date.getMinutes();
          secondes = 60 - date.getSeconds();
          divloc.innerHTML = hours + ":" + minutes + ":" + secondes;
        } else {
            divloc.innerHTML = "LIVE NOW";
            executeAction(target);
            
        };
      }, 1000);

}