document.write as real time calculation

Question

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.

Don't use `document.write`. Don't use ``. Don't use undeclared variables. Don't use global variables. Use a doctype. Close yout HTML elements properly. — Oriol, Apr 18 '16 at 23:30

score 1 · Accepted Answer · answered Apr 18 '16 at 23:22

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!

Perfect, real time, works if I adjust the system clock no lag, thank-you very much my friend. — Verse The Keg, Apr 18 '16 at 23:30

score 0 · Answer 2 · answered Apr 18 '16 at 23:21

Not the cleanest way to do this, but sounds like you don't really care.

<html>
<head>
<title>Time Past Since</title>
<script>
window.resizeTo(300,100);
setInterval(function(){
var 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)
str  = fh + hs + " hours " + fm + ms + " minutes.";
document.getElementById('display').innerHTML = str;
}, 60000);

</script>
</head>
<body>
<div><center id="display"></center></div>
</body>
</html>

document.write as real time calculation

2 Answers2