codergautamyt

countdown.html

Jul 4th, 2020 (edited)
119
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. p {
  7.   text-align: center;
  8.   font-size: 60px;
  9.   margin-top: 0px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14.  
  15. <p id="demo"></p>
  16.  
  17. <script>
  18. // Set the date we're counting down to
  19. var countDownDate = new Date("July 4, 2020 19:00").getTime();
  20.  
  21. // Update the count down every 1 second
  22. var x = setInterval(function() {
  23.  
  24.   // Get today's date and time
  25.   var now = new Date().getTime();
  26.    
  27.   // Find the distance between now and the count down date
  28.   var distance = countDownDate - now;
  29.    
  30.   // Time calculations for days, hours, minutes and seconds
  31.   var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  32.   var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  33.   var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  34.   var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  35.         function getlength(number) {
  36.     return number.toString().length;
  37. }
  38.  
  39. if (getlength(hours) == 1) {
  40. hours = "0"+hours;
  41. }
  42. if (getlength(minutes) == 1) {
  43. minutes = "0"+minutes;
  44. }
  45. if (getlength(seconds) == 1) {
  46. seconds = "0"+seconds;
  47. }
  48.   // Output the result in an element with id="demo"
  49.   document.getElementById("demo").innerHTML = days + " : " + hours + " : "
  50.   + minutes + " : " + seconds + "";
  51.    
  52.   // If the count down is over, write some text
  53.   if (distance < 0) {
  54.    clearInterval(x);
  55.    document.getElementById("demo").innerHTML = "Happy July Fourth!"
  56.  }
  57. }, 1000);
  58. </script>
  59.  
  60. </body>
  61. </html>
RAW Paste Data