javascript 使用未来日期的小时、分钟和秒创建计时器倒计时

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13023756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 17:39:44  来源:igfitidea点击:

Create a timer countdown using hours, minutes & seconds from a future date

javascript

提问by Michael Rader

I am using some code I found on the internet that creates a countdown from a certain date. I am trying to edit the code so that it only gives me a countdown from an hour, minute, and second that I specify from a future date. I cannot just have code that counts down from a specified time, I need it to countdown to a specified date in the future. This is important so that if the browser is refreshed the countdown doesn't start over but continues where left off. I will be using cookies so the browser remembers what future date was specified when it was first run.

我正在使用我在互联网上找到的一些代码来创建从某个日期开始的倒计时。我正在尝试编辑代码,以便它只给我一个从未来日期指定的小时、分钟和秒的倒计时。我不能只拥有从指定时间开始倒计时的代码,我需要它倒计时到未来的指定日期。这很重要,因此如果刷新浏览器,倒计时不会重新开始,而是从停止的地方继续。我将使用 cookie,以便浏览器记住第一次运行时指定的未来日期。

Here is the HTML:

这是 HTML:

<form name="count">
<input type="text" size="69" name="count2">
</form>

And here is the javascript:

这是javascript:

window.onload = function()  {
//change the text below to reflect your own,
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countdown(yr,m,d){
var theyear=yr; var themonth=m; var theday=d
var today=new Date()
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 todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec

futurestring=montharray[m-1]+" "+d+", "+yr

var dd=Date.parse(futurestring)-Date.parse(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==1){
document.forms.count.count2.value=current
return
}
else
document.forms.count.count2.value= dhour+":"+dmin+":"+dsec;
setTimeout(function() {countdown(theyear,themonth,theday)},1000)
}
//enter the count down date using the format year/month/day
countdown(2012,12,25)
}

I am sure there is superfluous code above since I only need an hour, minute, and second that I would like to pass to the countdown()function. The year, month and day is unimportant but as I said this is code I am trying to edit which I found on the internet. Any help would be very appreciated. Thank you!

我确信上面有多余的代码,因为我只需要一小时、一分钟和一秒,我想传递给countdown()函数。年、月和日并不重要,但正如我所说,这是我正在尝试编辑的代码,我在互联网上找到了这些代码。任何帮助将不胜感激。谢谢!

回答by RobG

You can create a date object for the target time and get the difference to a current date object. Note that this is dependent on the client having a correctly set clock.

您可以为目标时间创建一个日期对象,并获取与当前日期对象的差异。请注意,这取决于具有正确设置时钟的客户端。

function timeDiff(target) {

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

  var timeDiff = target - (new Date());
  var hours    = timeDiff / 3.6e6 | 0;
  var minutes  = timeDiff % 3.6e6 / 6e4 | 0;
  var seconds  = timeDiff % 6e4 / 1e3 | 0;

  return z(hours) + ':' + z(minutes) + ':' + z(seconds);
}

alert(timeDiff(new Date(2012,9,23,17,50,0)));

Run it every second, a few milliseconds after the next full second. I'll leave that to you.

每秒运行一次,在下一整秒后几毫秒。我会把它留给你。

Edit

编辑

What the heck, here's a timer to call it. Just needs an element with an id of "timer" in the document:

什么鬼,这是一个可以调用它的计时器。在文档中只需要一个 id 为“timer”的元素:

function doCountDown(target) {
  document.getElementById('timer').innerHTML = timeDiff(target);
  var lag = 1020 - (new Date() % 100);
  setTimeout(function(){doCountDown(target);}, lag);
}

window.onload = function() {
  doCountDown(new Date(2012,9,23,17,50,0));
}

回答by Ram Singh

you can use jquery countdown timerintegration is simple and having number of options to display in different formats....

您可以使用jquery 倒数计时器集成很简单,并且有许多选项可以以不同的格式显示....

回答by Aki Suihkonen

How about

怎么样

now = new Date();
then = new Date("30 Oct 2013");
time_diff_in_milliseconds = then-now;

integer_seconds=(time_diff_in_milliseconds/1000) >>0;
minutes = seconds / 60 |0;  // another convention to get floor
... etc.

You can put also time of day to the string.

您还可以将一天中的时间放入字符串。

a=new Date('Oct 30 2013 07:55:07'); b=new Date('Feb 28 2000 20:12:33');

a-b
..
431350954000