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

Question

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.

Here is the HTML:

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

And here is the 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!

RobG · Answer 1 · 2012-10-23T05:59:24.887

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:

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

Sry I am learning JavaScript and having trouble figuring this one out. What does the "%" sign mean? — Michael Rader, Oct 23 '12 at 06:05
The [`%` operator](http://ecma-international.org/ecma-262/5.1/#sec-11.5.3) performs the [modulo operation](http://en.wikipedia.org/wiki/Modulo_operation) and returns the remainder. That is, the remainder when the first number is divided by the second. e.g. `10 % 3 = 1` because 10/3 is 3 with 1 remainder, and `30 % 6 = 0` as 30/6 is 5 with no remainder. You need to be a little careful with using it, here it's fine because both numbers will be postivie integers. — RobG, Oct 23 '12 at 23:17

score 3 · Accepted Answer · answered Oct 23 '12 at 05:03

3

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

answered Oct 23 '12 at 05:03

Ram Singh

6,664
35
100
166

I looked at this and it is only asking for a date, not hour, minutes or seconds. I need the code to countdown to a specific hour, minute and second in the future, not a day. – Michael Rader Oct 23 '12 at 05:17
1

have you look all the options provided by it??????? have you seen the "Miscellaneous" option..........and "format1" and "format2" tooo – Ram Singh Oct 23 '12 at 05:19

Aki Suihkonen · Answer 3 · 2012-10-23T05:17:24.710

2

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

edited Oct 23 '12 at 05:17

answered Oct 23 '12 at 04:58

Aki Suihkonen

19,144
1
36
57

I need the difference in milliseconds hours, minutes and seconds from now, not a date. – Michael Rader Oct 23 '12 at 05:03
That's what I get: `a=new Date(); alert("Wait a moment"); b=new Date(); alert("You waited "+ (b-a) + " milliseconds");` – Aki Suihkonen Oct 23 '12 at 05:13
how do I specify in the code that I want the alert to execute in 1 hour and 45 minutes? – Michael Rader Oct 23 '12 at 05:18
2

Don't give string dates (especially a non–standard format) to the Date constructor, it will fail in some browsers. Construct a date properly, e.g. `new Date(2013, 9, 30)`. – RobG Oct 23 '12 at 05:40
That would be `setTimeout(function() {alert('Your timeout expired')},(((seconds*1000)+minutes)*60+hours)*60)` – Aki Suihkonen Oct 23 '12 at 05:42

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

3 Answers3

Edit