A function that uses images to perform a countdown.


/ Published in: JavaScript
Save to your folder(s)

Set the desired date within the function.
Make some images and label them "1.jpg, 2.jpg, 3.jpg, etc...".
That's how it's done.


Copy this code and paste it in your HTML
  1. <style type="text/css">
  2. .countDown {
  3. font-family:"Helvetica Neue",Helvetica,Calibri,"Liberation Sans",Arial,sans-serif;
  4. font-weight:300;
  5. letter-spacing:0.5px;
  6. text-align:center;
  7. }
  8. </style>
  9. <script type="text/javascript">
  10. currentDate = new Date();
  11. zeroDay = new Date("January 1, 2013"); // <===|INSERT_DATE_HERE
  12. msPerDay = 864E5;
  13. time = (zeroDay.getTime() - currentDate.getTime());
  14. days= time / msPerDay;
  15. dayCount = Math.floor(days);
  16. image = parseInt(dayCount) + 2;
  17. countDown ="<div id='countDown' class='countDown'>It's coming. Are you ready?<br>"+dayCount+" days until "+zeroDay+".</div>";
  18. if (dayCount > 30){document.write(countDown);}
  19. else if (dayCount <= 30){document.write("<img id='countDown' class='countDown' src='"+image+".jpg' alt='It's coming.'/>");}
  20. else {document.write("<img id='countDown' class='countDown' src='1.jpg' alt=''It's coming.'/>");}
  21. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.