显示来自 javascript 的时钟/时间增量

Question

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# c#

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

// JS COde // JS代码

//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);

}

Can you please help on this.你能帮忙吗？

Answer 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 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>

显示来自 javascript 的时钟/时间增量

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-17 14:45:17

Variant for multiple rows多行的变体

显示来自 javascript 的时钟/时间增量

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-17 14:45:17

Variant for multiple rows多行的变体

解决方案1
1 已采纳 2021-02-17 14:45:17