Creating a personalized JavaScript clock based on a specific time

Question

Creating a personalized JavaScript clock based on a specific time

I have implemented a script below, and my goal is to customize the time displayed by the script and have it update automatically without requiring manual adjustment each time. (I want to set the time once and have the script manage the display)

However, upon running the script, it shows: NaN:NaN:NaN AM

The code snippet I am using is:

<div id="js_clock"> display clock here </div>

 <script language="javascript">
    function js_clock(clock_time)
    {   
         var clock_hours = clock_time.getHours();  
         var clock_minutes = clock_time.getMinutes();  
         var clock_seconds = clock_time.getSeconds();  
         var clock_suffix = "AM";     
         if (clock_hours > 11){
         clock_suffix = "PM";
         clock_hours = clock_hours - 12;
         }
         if (clock_hours == 0){
         clock_hours = 12;
         }

         if (clock_hours < 10){
         clock_hours = "0" + clock_hours;
         }

         if (clock_minutes < 10){
         clock_minutes = "0" + clock_minutes;
         }

         if (clock_seconds < 10){
         clock_seconds = "0" + clock_seconds;
         }

         var clock_div = document.getElementById('js_clock');
         clock_div.innerHTML = clock_hours + ":" + clock_minutes + ":" + clock_seconds + " " + clock_suffix;
         setTimeout("js_clock()", 1000);
    }

     var serverTime = new Date("09:20:50");
     js_clock(serverTime);
 </script>

javascript time

Answer 1

Answer №1

Encountering an issue with creating the date, the code new Date("09:20:50"); results in Invalid Date.

If you need to specify hours, minutes, and seconds, you can use:

new Date(year, month, day [, hour, minute, second, millisecond])

For more information, you can refer to this link.

Furthermore, it seems like you missed passing a date to the setTimeout function, try this instead:

setTimeout(function() {
    js_clock(new Date(/*pass hours, minutes, and seconds here*/))
}, 1000);

Answer 2

Encountering an issue with creating the date, the code new Date("09:20:50"); results in Invalid Date.

If you need to specify hours, minutes, and seconds, you can use:

new Date(year, month, day [, hour, minute, second, millisecond])

For more information, you can refer to this link.

Furthermore, it seems like you missed passing a date to the setTimeout function, try this instead:

setTimeout(function() {
    js_clock(new Date(/*pass hours, minutes, and seconds here*/))
}, 1000);

Answer 3

Answer №2

Did you forget to include an argument when calling js_clock()? Perhaps you should try this:

setTimeout(
    function() {
        //Call the function again updating seconds by 1
        js_clock(
            new Date(
                clock_time.getFullYear(), 
                clock_time.getMonth(), 
                clock_time.getDate(), 
                clock_time.getHours(), 
                clock_time.getMinutes(), 
                clock_time.getSeconds() + 1
             )
        );
    }, 
    1000
);

UPDATE: I just realized this can actually be achieved with a single function call:

setTimeout(
    function() {
        js_clock(new Date(+clock_time + 1000));
    },
    1000
);

The +clock_time statement converts the Date object to milliseconds from the UNIX Epoch, so updating the time is as simple as adding 1000 milliseconds. Thanks goes to user RobG ;-)

Answer 4

Did you forget to include an argument when calling js_clock()? Perhaps you should try this:

setTimeout(
    function() {
        //Call the function again updating seconds by 1
        js_clock(
            new Date(
                clock_time.getFullYear(), 
                clock_time.getMonth(), 
                clock_time.getDate(), 
                clock_time.getHours(), 
                clock_time.getMinutes(), 
                clock_time.getSeconds() + 1
             )
        );
    }, 
    1000
);

UPDATE: I just realized this can actually be achieved with a single function call:

setTimeout(
    function() {
        js_clock(new Date(+clock_time + 1000));
    },
    1000
);

The +clock_time statement converts the Date object to milliseconds from the UNIX Epoch, so updating the time is as simple as adding 1000 milliseconds. Thanks goes to user RobG ;-)

Answer 5

Answer №3

Your code has some critical issues that need to be addressed:

The function setTimeout does not execute at the exact interval specified; instead, it runs as soon as possible after the set time, causing the clock to gradually drift out of sync.

Parsing a string into Date and assuming correct interpretation can lead to problems. In ECMA-262 ed 3, it was entirely dependent on implementation, and in ES5, the string must adhere to a custom ISO8601 long format (which may not be supported by all browsers).

Furthermore, if the client is busy, the function may experience delays of several seconds. Therefore, the clock should initially synchronize with the client's clock and then adjust for any time discrepancies.

The following optimized function resolves these issues.

<script type="text/javascript">
var customClock = (function() {

  var timeDifference;
  var timer;

  function addZero(n) {
    return (n < 10 ? '0' : '') + n;
  }

  function formatTime(date) {
    return addZero(date.getHours()) + ':' +
           addZero(date.getMinutes()) + ':' +
           addZero(date.getSeconds());
  }

  return function (startTime) {

    var currentTime = new Date();
    var targetTime;

    // Set lag to just after next full second
    var lag = 1015 - currentTime.getMilliseconds();

    // Calculate time difference on first run
    if (startTime) {
      startTime = startTime.split(':');
      targetTime = new Date(currentTime);
      targetTime.setHours(+startTime[0], +startTime[1], +startTime[2], 0);
      timeDifference = currentTime - targetTime;
    }

    currentTime = new Date(currentTime - timeDifference);

    document.getElementById('clock').innerHTML = formatTime(currentTime); 
    timer = setTimeout(customClock, lag);
  }
}());

window.onload = function() {
  customClock('09:20:50');
}

</script>

<div id="clock"></div>

Answer 6

Your code has some critical issues that need to be addressed:

The function setTimeout does not execute at the exact interval specified; instead, it runs as soon as possible after the set time, causing the clock to gradually drift out of sync.

Parsing a string into Date and assuming correct interpretation can lead to problems. In ECMA-262 ed 3, it was entirely dependent on implementation, and in ES5, the string must adhere to a custom ISO8601 long format (which may not be supported by all browsers).

Furthermore, if the client is busy, the function may experience delays of several seconds. Therefore, the clock should initially synchronize with the client's clock and then adjust for any time discrepancies.

The following optimized function resolves these issues.

<script type="text/javascript">
var customClock = (function() {

  var timeDifference;
  var timer;

  function addZero(n) {
    return (n < 10 ? '0' : '') + n;
  }

  function formatTime(date) {
    return addZero(date.getHours()) + ':' +
           addZero(date.getMinutes()) + ':' +
           addZero(date.getSeconds());
  }

  return function (startTime) {

    var currentTime = new Date();
    var targetTime;

    // Set lag to just after next full second
    var lag = 1015 - currentTime.getMilliseconds();

    // Calculate time difference on first run
    if (startTime) {
      startTime = startTime.split(':');
      targetTime = new Date(currentTime);
      targetTime.setHours(+startTime[0], +startTime[1], +startTime[2], 0);
      timeDifference = currentTime - targetTime;
    }

    currentTime = new Date(currentTime - timeDifference);

    document.getElementById('clock').innerHTML = formatTime(currentTime); 
    timer = setTimeout(customClock, lag);
  }
}());

window.onload = function() {
  customClock('09:20:50');
}

</script>

<div id="clock"></div>

Answer 7

Answer №4

Whoops! It looks like there's still a timing issue here. Although the error has been resolved, the displayed time is not accurate.

window.js_clock = function js_clock(clock_time) {
    var clock_hours = clock_time.getHours();
    var clock_minutes = clock_time.getMinutes();
    var clock_seconds = clock_time.getSeconds();
    var clock_suffix = "AM";
    if (clock_hours > 11) {
        clock_suffix = "PM";
        clock_hours = clock_hours - 12;
    }
    if (clock_hours === 0) {
        clock_hours = 12;
    }

    if (clock_hours < 10) {
        clock_hours = "0" + clock_hours;
    }

    if (clock_minutes < 10) {
        clock_minutes = "0" + clock_minutes;
    }

    if (clock_seconds < 10) {
        clock_seconds = "0" + clock_seconds;
    }

    var clock_div = document.getElementById('js_clock');
    clock_div.innerHTML = clock_hours + ":" + clock_minutes + ":" + clock_seconds + " " + clock_suffix;
    setTimeout("js_clock(new Date())", 1000);
}

var serverTime = new Date("09:20:50");
window.js_clock(serverTime);

Answer 8

Whoops! It looks like there's still a timing issue here. Although the error has been resolved, the displayed time is not accurate.

window.js_clock = function js_clock(clock_time) {
    var clock_hours = clock_time.getHours();
    var clock_minutes = clock_time.getMinutes();
    var clock_seconds = clock_time.getSeconds();
    var clock_suffix = "AM";
    if (clock_hours > 11) {
        clock_suffix = "PM";
        clock_hours = clock_hours - 12;
    }
    if (clock_hours === 0) {
        clock_hours = 12;
    }

    if (clock_hours < 10) {
        clock_hours = "0" + clock_hours;
    }

    if (clock_minutes < 10) {
        clock_minutes = "0" + clock_minutes;
    }

    if (clock_seconds < 10) {
        clock_seconds = "0" + clock_seconds;
    }

    var clock_div = document.getElementById('js_clock');
    clock_div.innerHTML = clock_hours + ":" + clock_minutes + ":" + clock_seconds + " " + clock_suffix;
    setTimeout("js_clock(new Date())", 1000);
}

var serverTime = new Date("09:20:50");
window.js_clock(serverTime);

Creating a personalized JavaScript clock based on a specific time

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to manually close the modal in Next.js using bootstrap 5

What is causing the array elements to be iterated through multiple times?

AngularJS: handling multiple asynchronous requests

Tips for personalizing the NavigatorIOS's right side

Having difficulty sending a message from an AngularJS application to an Angular 10 application through an iframe

What is the process of turning an SVG element into a clickable link?

How can I match all routes in Express except for '/'?

When utilizing the data-target attribute, the Bootstrap dropdown becomes toggled

Save array data to a file in Node.js once it finishes looping

To link circles vertically with a line and fill them with color when clicked, follow these steps:

JavaScript counter to monitor the number of requests made to the Open Weather Map API

N8N: Deleting JSON Key from Output

Searching Firebase by using comparison operators on various fields

Exploring the concept of event delegation: Understanding the difference between Event.target and

Guide to utilizing Materialize with Angular 2

How to efficiently await multiple promises in Javascript

What is the best way to accomplish this task using JavaScript fetch?

Setting the z-index for data points in a scatter plot on HighCharts

Use Puppeteer and Node.js to repeatedly click a button until it is no longer present, then initiate the next step

An old-school Ajax request abruptly interrupted halfway through