Show clock/time increment from javascript

I tried to show/increment the only time(Hours, Minutes and Seconds) like a timer from getting server side, but it’s not working for me.

For this I tried below code.

Can you please help me to run the specified time (Server Time) to run as Timer.

What I have tried:

c#

ScriptManager.RegisterStartupScript(Page, this.GetType(), "close", "OnRunnTimer("+0.21023+");", true);

// JS COde

//Server time I am sending serverTimeP = 0.21023

function OnRunnTimer(timeP) { 
            setInterval(function () { runJSTimer(timeP); }, 1000);
        }

 function runJSTimer(serverTimeP) {

var d = new Date();
              
             d.setHours(serverTimeP);             
            
 
             var hours = d.getHours();
             var min = d.getMinutes();
             var sec = d.getSeconds();
 
             lblJsTimer.SetText(hours + ":" + min + ":" + sec);

}

enter image description here
Can you please help on this.

36 thoughts on “Show clock/time increment from javascript”

  1. I’m not sure if I understood, but this is my example of solution to what I think to be your issue.

    <body>
        <h2 id="timeLabel">Time Label!</h2>
    
        <script type="text/javascript">
            var hours = 0;
            var min = 0;
            var sec = 0;
            var serverTime = '2021-02-17T14:34:14.426Z'; // server time example in ISO format
    
            var refreshTimeLabel = function(){
                document.getElementById("timeLabel").innerHTML = hours + ":" + min + ":" + sec;
            }
    
            var refreshVariables = function () {
                var serverTimeDate = new Date(serverTime);
                var updatedServerTimeInMilliseconds = serverTimeDate.getTime() + (1000);
                var updatedServerTimeDate = new Date(updatedServerTimeInMilliseconds);
    
                serverTime = updatedServerTimeDate.toISOString();
                hours = updatedServerTimeDate.getHours();
                min = updatedServerTimeDate.getMinutes();
                sec = updatedServerTimeDate.getSeconds();
            }
    
            var startTimer = function() { 
                setInterval(function () { 
                    refreshVariables();
                    refreshTimeLabel();
                }, 1000);
            }
    
            startTimer();
        </script>
    </body>
    

    Variant for multiple rows

    <body>
        <h2 id="timeLabel">Time Label!</h2>
    
        <script type="text/javascript">
            var serverTimes = ['2021-02-17T16:34:45.426Z', '2021-02-17T14:54:14.426Z', '2021-02-17T14:00:00.426Z']; // server time array example in ISO format
    
            var refreshServerTimeByIndex = function (index) {
                var serverTime = serverTimes[index];
                var serverTimeDate = new Date(serverTime);
                var updatedServerTimeInMilliseconds = serverTimeDate.getTime() + (1000);
                var updatedServerTimeDate = new Date(updatedServerTimeInMilliseconds);
    
                serverTimes[index] = updatedServerTimeDate.toISOString();
            }
    
            var refreshServerTimes = function(){
                var i;
                for(i = 0; i < serverTimes.length; i++){
                    refreshServerTimeByIndex(i);
                }
            }
    
            var getTimeTextByDateObject = function(dataISO){
                var date = new Date(dataISO);
                var hours = date.getHours();
                var min = date.getMinutes();
                var sec = date.getSeconds();
                return hours + ":" + min + ":" + sec;
            }
    
            var refreshTimeLabel = function(){
                var textLabel = "";
                for(i = 0; i < serverTimes.length; i++){
                    textLabel += " | " + getTimeTextByDateObject(serverTimes[i]);
                }
    
                document.getElementById("timeLabel").innerHTML = textLabel;
            }
    
            var startTimer = function() { 
                setInterval(function () { 
                    refreshServerTimes();
                    refreshTimeLabel();
                }, 1000);
            }
    
            startTimer();
        </script>
    </body>
    
    Reply

Leave a Comment