如何在HTML / javascript中实时设置倒计时 [英] How to set a countdown in realtime in HTML/javascript

问题描述

您好，我想倒计时并将其放入我的网站。我做了一个倒计时，但我有一个问题，当我启动时，秒钟冻结它们不再运行......所以倒计时不再是实时的......

这就是我的意思确实：

Hello, I want to do a countdown and put it in my website. I did a countdown but I have a problem, when I launch it, the seconds are freezing they are not anymore running... So the countdown is not in realtime anymore...
Here is what I did:

<span id="dhour"></span> h <span id="dmin"></span> min <span id="dsec"></span> sec
<div id="count2"></div>
<div class="numbers" id="dday" hidden="true"></div>
<script>
    var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    var year;
    var month;
    var day;
    var hour = 19;
    var minute = 10;
    var tz = 0;
    var ladate;
    var today;

    function myCallback(json) {

        ladate = new Date(json.dateString);

        year = ladate.getFullYear();
        month = ladate.getMonth() + 1;
        day = ladate.getDate();
        countdown(year, month, day, hour, minute);
    }

    function countdown(yr, m, d, hr, min) {
        theyear = yr;
        themonth = m;
        theday = d;
        thehour = hr;
        theminute = min;
        today = ladate;
        var todayy = today.getYear();
        if (todayy < 1000) {
            todayy += 1900;
        }

        var todaym = today.getMonth();
        var todayd = today.getDate();
        var todayh = today.getHours();
        var todaymin = today.getMinutes();
        var todaysec = today.getSeconds();
        var todaystring1 = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
        var todaystring = Date.parse(todaystring1) + (tz * 1000 * 60 * 60);
        var futurestring1 = (montharray[m - 1] + " " + d + ", " + yr + " " + hr + ":" + min);
        var futurestring = Date.parse(futurestring1) - (today.getTimezoneOffset() * (1000 * 60));
        var dd = futurestring - todaystring;
        var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
        var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
        var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
        var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);

        if (dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 0) {
            document.getElementById('count2').style.display = "inline";
            document.getElementById('after').style.display = "none";

            document.getElementById('dday').style.display = "none";
            document.getElementById('dhour').style.display = "none";
            document.getElementById('dmin').style.display = "none";
            document.getElementById('dsec').style.display = "none";
            document.getElementById('days').style.display = "none";
            document.getElementById('hours').style.display = "none";
            document.getElementById('minutes').style.display = "none";
            document.getElementById('seconds').style.display = "none";
            return;
        } else {
            document.getElementById('count2').style.display = "none";
            document.getElementById('dday').innerHTML = dday;
            document.getElementById('dhour').innerHTML = dhour;
            document.getElementById('dmin').innerHTML = dmin;
            document.getElementById('dsec').innerHTML = dsec;
            setTimeout("countdown(theyear,themonth,theday,thehour,theminute)", 1000);
        }
    }
</script>
<script type="text/javascript" src="http://www.timeapi.org/utc/now.json?callback=myCallback"></script>

谢谢。< br $> b $ b

我尝试了什么：



我试过但没找到一个解决方案...

Thank you.

What I have tried:

I tried but didn't find a solution...

推荐答案

我不确定 timeapi.org 正在做什么，但倒计时似乎是基于同时的两个声明：

I'm not sure what the timeapi.org is doing, but the countdown appears to be based on two declarations of the same time:

ladate = new Date(json.dateString);

和

today = ladate;

此外，未来日期将从下一个日期减去一个月，将其设置为当前月份，导致代码永远不会达到超时调用

Also, the future date is subtracts one from the next month, setting it to the current month, resulting in the code never reaching the timeout call

var futurestring1 = (montharray[m - 1] + " " + d + ", " + yr + " " + hr + ":" + min);

通过将第二个时间变量更改为当前时间而不是从未来日期减去1，

By changing the second time variable to the current time and not subtracting 1 from the future date,

today = new Date();
var futurestring1 = (montharray[m - 0] + " " + d + ", " + yr + " " + hr + ":" + min);

倒计时开始计算未来时间（latime）和当前时间（今天）之间的差异。



-----------



此外，提供的html代码中缺少具有objectid [天，小时，分钟，秒]的对象。并且防止代码失败。

The countdown starts to function by calculating the difference between the future time (latime) and the current time (today).

-----------

Also, the objects with the objectid's [days, hours, minutes, seconds] are missing from the html code provided. and prevent the code from failing properly.

好的，我想我理解了这个问题 - 对timeapi.org的调用会根据timeapi服务器返回当前时间。然后你用那个时间创建一个未来的时间，将来一个月的晚上7:10。 当前时间（latime，today和todaystring）永远不会在创建后递增，因此倒计时总是将未来时间与不变的当前时间进行比较。



为了避免使用本地用户时钟（可以更改）来获取当前时间，您可以对timeapi.org进行新的ajax调用以获得可信当前时间，意识到会有滞后或增加原始当前时间本地脚本。



根据我的经验，客户端计算机上的递增可能会落后于实际时间，具体取决于客户端计算机功能和计算负载，尤其是在长时间内时间段。



我添加了一些显示各种变量的进度消息，因为脚本运行时显示当前时间和未来时间的比较位置并且可能会增加。

OK, I think I understand the question - the call to timeapi.org returns the current time according to the timeapi server. You're then using that time create a future time, one month in the future at 7:10 pm. The "current" time (latime, today, and todaystring) is never incremented once created, so the countdown is always comparing the future time to an unchanging current time.

To avoid using a local user clock (that can be changed) to get the current time, you can either make a new ajax call to timeapi.org for the trusted current time, realizing there will be a lag, or increment the original current time locally in the script.

In my experience, incrementing on the client machine may lag behind the true time, depending on the client machine capabilities and computing load, especially over long time periods.

I've added a few progress messages that display various variables as the script runs to show where the current time and future time are compared and might be incremented.

<html><head><title>countdown</title></head><body>

<span id="dday">days</span> d <span id="dhour">hours</span> h <span id="dmin">minutes</span> min <span id="dsec">seconds</span> sec
<div id="count2">id=count2</div>
<div class="numbers" id="dday" hidden=true >id=dday</div>
<hr />
<div id="debug"></div>
<script>
    var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    var year;
    var month;
    var day;
    var hour = 19;
    var minute = 10;
    var tz = 0;
    var ladate;
    var today;

	 var bugbox;
	 
	 
    function myCallback(json) {

		bugbox=document.getElementById("debug");
		
		
		ladate = new Date(json.dateString);

        year = ladate.getFullYear();
        month = ladate.getMonth() + 1;
        day = ladate.getDate();
		  
		  bugbox.innerHTML+='<p>ladate= '+ladate+'</p>';
		  
		  bugbox.innerHTML+='<p>1. year, month, day, hour, minute= '+year+','+month+','+day+','+hour+','+minute+'</p>';
		  
        countdown(year, month, day, hour, minute);
    }

    function countdown(yr, m, d, hr, min) {
        theyear = yr;
        themonth = m;
        theday = d;
        thehour = hr;
        theminute = min;
		  
        today = ladate;
		  
		  today=new Date(yr,m-1,d,hr,min);
		  
		  bugbox.innerHTML+='<p>today= '+today+'</p>';
        var todayy = today.getYear();
        if (todayy < 1000) {
            todayy += 1900;
        }

        var todaym = today.getMonth();
        var todayd = today.getDate();
        var todayh = today.getHours();
        var todaymin = today.getMinutes();
        var todaysec = today.getSeconds();
        var todaystring1 = montharray[todaym-0] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
        var todaystring = Date.parse(todaystring1) + (tz * 1000 * 60 * 60);
        var futurestring1 = (montharray[m - 0] + " " + d + ", " + yr + " " + hr + ":" + min);
		  
		  bugbox.innerHTML+='<p>2. todaystring1= '+todaystring1+'</p>';
        bugbox.innerHTML+='<p>3. futurestring1= '+futurestring1+'</p>';
        
		  var futurestring = Date.parse(futurestring1) - (today.getTimezoneOffset() * (1000 * 60));
        var dd = futurestring - todaystring;
        var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
        var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
        var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
        var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);

        if (dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 0) {
		  
		  bugbox.innerHTML+='<p>ERR: '+dday+','+dhour+','+dmin+','+dsec+'</p>';
            document.getElementById('count2').style.display = "inline";
            //document.getElementById('after').style.display = "none";

            document.getElementById('dday').style.display = "none";
            document.getElementById('dhour').style.display = "none";
            document.getElementById('dmin').style.display = "none";
            document.getElementById('dsec').style.display = "none";
            /***
				document.getElementById('days').style.display = "none";
            document.getElementById('hours').style.display = "none";
            document.getElementById('minutes').style.display = "none";
            document.getElementById('seconds').style.display = "none";
				***/
            return;
        } else {
            document.getElementById('count2').style.display = "none";
            document.getElementById('dday').innerHTML = dday;
            document.getElementById('dhour').innerHTML = dhour;
            document.getElementById('dmin').innerHTML = dmin;
            document.getElementById('dsec').innerHTML = dsec;
            setTimeout("countdown(theyear,themonth,theday,thehour,theminute)", 1000);
				
				bugbox.innerHTML+='<p>4. dday, dhour, dmin, dsec= '+dday+','+dhour+','+dmin+','+dsec+'</p>';
				
        }
    }
</script>
<script type="text/javascript" src="http://www.timeapi.org/utc/now.json?callback=myCallback"></script>

</body></html>

这篇关于如何在HTML / javascript中实时设置倒计时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！