Verse The Keg Verse The Keg - 7 months ago 10
Javascript Question

document.write as real time calculation

Below is a code the figure out the hour and minutes past since 8:30 AM based on the system clock, this is used for internal purposes only so I'm not fussed with the best practices

<html>
<head>
<title>Time Past Since</title>
<meta http-equiv="Refresh" content="60">
<script>
window.resizeTo(300,100);
sd = new Date(); // Get system date (sd)
sh = sd.getHours(); // Get system hour (sh)
sm = sd.getMinutes(); // Get system minutes (sm)
wh = (08); // Specify work start hour (wh)
wm =(30); // Specify work start minute (wh)
ts = ((sh *60 + sm) - (wh *60 + wm)); // Specify time since (ts) in minutes
hs = Math.floor(ts/60); // Convert the hours (hs)
ms = Math.round((ts/60 % 1) * 60); // Convert the minutes (ms)
fh = hs < 10 ? "0" : "" // Format Hours (fh)
fm = ms < 10 ? "0" : "" // Format Minutes (fm)
</script>
</head>
<body>
<center><script>document.write(fh + hs + " hours " + fm + ms + " minutes."); </script></center>





As you can see I'm using a meta to refresh the page every 60 seconds, what I'd prefer is a alternative to the document.write that calculates the difference.

I know that inline html is an alternative but I can't seem to get it to work, a working example of my code would be fantastic, thanks in advance.

Answer

Below is a snippet that does what I believe you want to do. I used your code, as requested although there are more efficient ways to calculate the difference between two times. See this SO question if you are interested.

<html>
  <head>
    <title>Time Past Since</title>
  </head>
  
  <body>
    <center id="time">Test</center>

    <script>
      window.resizeTo(300,100);

      updateTime();
      setInterval(updateTime, 60000);

      function updateTime() {
        sd = new Date(); // Get system date (sd)
        sh = sd.getHours(); // Get system hour (sh)
        sm = sd.getMinutes(); // Get system minutes (sm)
        wh = (08); // Specify work start hour (wh)
        wm =(30); // Specify work start minute (wh)
        ts = ((sh *60 + sm) - (wh *60 + wm)); // Specify time since (ts) in minutes
        hs = Math.floor(ts/60); // Convert the hours (hs)
        ms = Math.round((ts/60 % 1) * 60);  // Convert the minutes (ms)
        fh = hs < 10 ? "0" : ""; // Format Hours (fh)
        fm = ms < 10 ? "0" : ""; // Format Minutes (fm)
        document.getElementById("time").innerHTML = fh + hs + " hours " + fm + ms + " minutes.";
      }
    </script>
  </body>
</html>

I wrapped the time calculation in a function called updateTime and makes it run every 60 seconds. It updates the text without the need to refresh.

I named the function instead of making it an anonymous function because we need to call it once when the page is first loaded.

Don't forget to click the green "accept answer" button if I answered your question!

Comments