Making Date/Time auto-update on Javascript within proprietary software

Question

I'm using proprietary software to create a page that I need to display (among other things, mainly HVAC controls) date and time. The software has a block for "custom html" (with the note "This content will be saved in a separate HTML file within <html> and <body> tags"), into which I place my code.

After some research (I'm not a coder and have mainly been copy-pasting), the code I have pasted into said block is as follows:

<script language="javascript"> 
    var t = new Date(); 
    document.write(t.toDateString()+""+t.getHours()+":"+t.getMinutes()); 
</script>

And this gets me pretty close to what I want (day, month, date, year, time). I'd prefer if I could get AM/PM but mainly what I want is for the date/time to auto-update so the user doesn't need to refresh the page before getting an accurate printout.

While I've seen many threads on this site devoted to auto-updating time/date, I'm not sure how to integrate any of them with the system I'm working with (I've been at this for some time now), so I thought I'd ask the question with the context I'm working with.

There are so (really) so many scripts online (and even here on StackOverflow) - all you have to do is 1. find it 2. use it. - `am pm javascript clock` would be a good starting point... — Roko C. Buljan, May 01 '17 at 15:56

ajai Jothi · Answer 1 · 2017-05-01T19:27:41.323

This is not the exact format you want, but gives different way to achieve what you need. with some string manipulation you can achieve the same. if you could share the exact format you want to display, I could modify the solution.

Using setTimeout() or setInterval() to continuously make changes to the user's screen often induces "layout thrashing", the browser version of cardiac arrest where it is forced to perform unnecessary reflows of the page before the user's screen is physically able to display the changes. This is very bad due to the taxing nature of page reflows, especially on mobile devices where the problem is most apparent, with junky page loads and battery drains.

It is for the above reasons requestAnimationFrame() was introduced. The method in a nutshell allows you to execute code on the next available screen repaint, taking the guess work out of getting in sync with the user's browser and hardware readiness to make changes to the screen. When we call requestAnimationFrame() repeatedly to create a screen update, we are assured that our update code is called when the user's computer is actually ready to make changes to the screen each time, resulting in a smoother, more efficient update. Furthermore, code called via requestAnimationFrame() and running inside background tabs in your browser are either paused or slowed down significantly (to 2 frames per second or less) automatically to further save user system resources- there's no point in running the screen update that isn't being seen.

(function updateTime() {
  var time = (new Date()).toLocaleString({
    hour12: true,
  });
  
  document.getElementById('current_time').innerHTML = time;
  
  requestAnimationFrame(updateTime);
})();

<div id="current_time"></div>

Please add some explanation of why/how this code helps the OP. This will help provide an answer future viewers can learn from. See [this Meta question and its answers](http://meta.stackoverflow.com/q/256359/215552) for more information. — Heretic Monkey, May 01 '17 at 19:01

score -1 · Answer 2 · edited May 23 '17 at 12:02

-1

setInterval(function(){
    var t = new Date(); 
    document.write(t.toDateString()+""+t.getHours()+":"+t.getMinutes()); 
}, 1000);

Will run your script once every second, unfortunately this doesn't get rid of old times, so I would suggest having a placeholder you can update like an html span element.

<span id="time"></span>
<script>
setInterval(function(){
        var t = new Date(); 
        document.getElementById("time").innerHTML =
            (t.toDateString()+""+t.getHours()+":"+t.getMinutes()); 
    }, 1000);
</script>

Now, your clock is going to need some formatting, because right now, if, say, the time is 11:05, it displays 11:5. I would check that out here

Hopefully this works in your system.

edited May 23 '17 at 12:02

Community

1
1

answered May 01 '17 at 15:57

Kyle Becker

1,360
12
20

Oh, that first one just keeps writing new displays--definitely not what I'm looking for. As for the second one, does this replace the entirety of what I posted above or does this all slide between the javascript tags? – JoeTrane May 01 '17 at 16:09
@JoeTrane If I understand you correctly, this will replace the entirety – Kyle Becker May 01 '17 at 16:10
Great, it's updating now! I'll just fiddle around with the formatting for proper spacing, leading zeroes, and AM/PM. Thanks, man! – JoeTrane May 01 '17 at 16:19

Making Date/Time auto-update on Javascript within proprietary software

2 Answers2