Jump to content

7 Day Count Down Clock


westman

Recommended Posts

There are several pieces, so take them one at a time. The first step is to learn how to use Javascript date objects if you don't already. These pages describe the date object: http://www.w3schools.com/js/js_obj_date.asphttp://www.w3schools.com/jsref/jsref_obj_date.asp You need to be able to set a date object to a specific date (your target date), and set a date object to the current date. Once you have two date objects that represent the start and end, then the rest is math. The valueOf method returns a number that is the number of milliseconds since 1/1/70: http://www.w3schools.com/jsref/jsref_valueof_date.asp Once you have each date as the number of milliseconds, then you subtract them to get the difference. There are 86,400,000 milliseconds in one day, so to get the number of days you divide the difference by 86400000. You can use the math object and the modulus operator to get the number of days and the remainder: days = Math.floor(difference / 86400000);remainder = difference % 86400000; The remainder is less than a day now, so you use the same technique to get the number of hours plus remainder, minutes plus remainder, and seconds. So the first step is writing the code to calculate those values and write them to a page. Once you have that code, then you use setTimeout to keep running it every second to update a counter on the page: http://www.w3schools.com/js/js_timing.asp Keep in mind that the counter is the time between the clock on the user's computer and the date in their timezone, not the timezone on your server.

Link to comment
Share on other sites

i got this scripted... <form name="count"> <input type="text" size="69" name="count2"> </form> <script>/*Count down until any date script-By JavaScript Kit (www.javascriptkit.com)Over 200+ free scripts here!*///change the text below to reflect your own,var before="Christmas!"var current="Today is Christmas. Merry Christmas!"var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")function countdown(yr,m,d){theyear=yr;themonth=m;theday=dvar today=new Date()var todayy=today.getYear()if (todayy < 1000)todayy+=1900var 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+":"+todaysecfuturestring=montharray[m-1]+" "+d+", "+yrdd=Date.parse(futurestring)-Date.parse(todaystring)dday=Math.floor(dd/(60*60*1000*24)*1)dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)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=currentreturn}elsedocument.forms.count.count2.value="Only "+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+beforesetTimeout("countdown(theyear,themonth,theday)",1000)}//enter the count down date using the format year/month/daycountdown(2011,12,25)</script> but this countdown is for 1 event a year and dose not reset the date how do i get it to 1 event a week and rest the date automatically?like a cron job in java script

Link to comment
Share on other sites

Javascript can't remember anything, so you can't update the countdown for the next value. What you can do is find one particular date and time you know to count down to and hardcode that timestamp into your script, then when the script starts up keep adding 7 days to it until you reach a date that's after the current time. After that you display the countdown to that specified date.

Link to comment
Share on other sites

ok i now have the 7 day count and all in all looking like this...

<div id="count"><?php$day = date('d');$month = date('m');$year = date('Y');$nextMonday = date("Y, m, d",strtotime('next Monday',mktime(0,0,0,$month,$day,$year)));?></div>	   	  <form name="count"><input type="text" size="69" name="count2"></form><script>/*Count down until any date script-By JavaScript Kit (www.javascriptkit.com)Over 200+ free scripts here!*///change the text below to reflect your own,var before="Christmas!"var current="Today is Christmas. Merry Christmas!"var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")function countdown(yr,m,d){theyear=yr;themonth=m;theday=dvar today=new Date()var todayy=today.getYear()if (todayy < 1000)todayy+=1900var 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+":"+todaysecfuturestring=montharray[m-1]+" "+d+", "+yrdd=Date.parse(futurestring)-Date.parse(todaystring)dday=Math.floor(dd/(60*60*1000*24)*1)dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)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=currentreturn}elsedocument.forms.count.count2.value="Only "+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+beforesetTimeout("countdown(theyear,themonth,theday)",1000)}//enter the count down date using the format year/month/day//countdown(2012,12,25)  countdown(<?php echo $nextMonday; ?>)</script>

just have 2 questions...1. how do i get my output (document.forms.count.count2.value=current) in a div not a form?2. is the php and Javascript time from the server and not from the users pc, if not how do i set the time to the server or London, UK?

Link to comment
Share on other sites

1) give a <div> element somewhere on the page an id and use document.getElementById to assign current to its innerHTML property.2) Javascript will use the user's local time. PHP uses the servers time. If the server is in the timezone of the time being counted down to, you could just use php to echo out the current timestamp in milli's as well. That way the countdown is all "local" time to London/server.

Link to comment
Share on other sites

  • 3 weeks later...

ok i got...<div id="count"></div> do i use ...document.getElementById.count.value=currentreturn} elsedocument.getElementById.count.value="Only "+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+before ?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...