nathan15

JavaScript Countdown

Dec 7th, 2012
81
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script type="text/javascript">
  2.  
  3. dateFuture1 = new Date(2012,11,25,0,0,0);
  4.  
  5. function GetCount(ddate,iid){
  6.  
  7.         dateNow = new Date();   //grab current date
  8.         amount = ddate.getTime() - dateNow.getTime();   //calc milliseconds between dates
  9.         delete dateNow;
  10.  
  11.         // if time is already past
  12.         if(amount < 0){
  13.                 document.getElementById(iid).innerHTML="Now!";
  14.         }
  15.         // else date is still good
  16.         else{
  17.                 days=0;hours=0;mins=0;secs=0;out="";
  18.  
  19.                 amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
  20.  
  21.                 days=Math.floor(amount/86400);//days
  22.                 amount=amount%86400;
  23.  
  24.                 hours=Math.floor(amount/3600);//hours
  25.                 amount=amount%3600;
  26.  
  27.                 mins=Math.floor(amount/60);//minutes
  28.                 amount=amount%60;
  29.  
  30.                 secs=Math.floor(amount);//seconds
  31.  
  32.                 if(days != 0) { out += days +" <span>"+((days==1)?"day":"days")+"</span>, "; }
  33.                 if(hours != 0) { out += hours +" <span>"+((hours==1)?"hour":"hours")+"</span>, "; }
  34.                 out += mins +" <span>"+((mins==1)?"minute":"minutes")+"</span>, ";
  35.                 out += secs +" <span>"+((secs==1)?"second":"seconds")+"</span>, ";
  36.                 out = out.substr(0,out.length-2);
  37.                 document.getElementById(iid).innerHTML=out;
  38.  
  39.                 setTimeout(function(){GetCount(ddate,iid)}, 1000);
  40.         }
  41. }
  42.  
  43. window.onload=function(){
  44.         GetCount(dateFuture1, 'countbox1');
  45.        
  46.        
  47. };
  48. </script>
  49. <style type="text/css">
  50. .countbox { /* style for overall box; since the style for the text is different (below), this is the style for the numbers */
  51. font: 28px helvetica, arial, sans-serif;
  52. color: #555;
  53. }
  54. .countbox span { /* style for actual text, e.g. minutes, seconds, hours, etc. */
  55. font: 23px helvetica, arial, sans-serif;
  56. vertical-align: middle;
  57. }
  58. </style>
  59. <div id="countbox1" class="countbox"></div>
Advertisement
Add Comment
Please, Sign In to add comment