CODEWITHSUNDEEP
javascriptasp.nettimer
Magento Nav
Magento Nav

Reputation: 119

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.

Upvotes: 0

Views: 180

Answers (1)

Samir Ribeiro
Samir Ribeiro

Reputation: 205

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 getTimeTextByDateISO = 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 = "";
            var i;
            for(i = 0; i < serverTimes.length; i++){
                textLabel += " | " + getTimeTextByDateISO(serverTimes[i]);
            }

            document.getElementById("timeLabel").innerHTML = textLabel;
        }

        var startTimer = function() { 
            setInterval(function () { 
                refreshServerTimes();
                refreshTimeLabel();
            }, 1000);
        }

        startTimer();
    </script>
</body>

Upvotes: 1

Related Questions