MilutuS

Untitled

Aug 29th, 2019
136
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.29 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <style>
  8. .countup {
  9. text-align: center;
  10. margin-bottom: 20px;
  11. }
  12. .countup .timeel {
  13. display: inline-block;
  14. padding: 10px;
  15. background: #151515;
  16. margin: 0;
  17. color: white;
  18. min-width: 2.6rem;
  19. margin-left: 13px;
  20. border-radius: 10px 0 0 10px;
  21. }
  22. .countup span[class*="timeRef"] {
  23. border-radius: 0 10px 10px 0;
  24. margin-left: 0;
  25. background: #e8c152;
  26. color: black;
  27. }
  28. </style>
  29.  
  30. <script type="text/javascript">
  31. /*
  32. * Basic Count Up from Date and Time
  33. * Author: @mrwigster / https://guwii.com/bytes/count-date-time-javascript/
  34. */
  35. window.onload = function() {
  36. // Month Day, Year Hour:Minute:Second, id-of-element-container
  37. countUpFromTime("Aug 30, 2019 15:15:00", 'countup1'); // ****** Change this line!
  38. };
  39. function countUpFromTime(countFrom, id) {
  40. countFrom = new Date(countFrom).getTime();
  41. var now = new Date(),
  42. countFrom = new Date(countFrom),
  43. timeDifference = ( countFrom- now);
  44.  
  45. var secondsInADay = 60 * 60 * 1000 * 24,
  46. secondsInAHour = 60 * 60 * 1000;
  47.  
  48. days = Math.floor(timeDifference / (secondsInADay) * 1);
  49. hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
  50. mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
  51. secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);
  52.  
  53. var idEl = document.getElementById(id);
  54. idEl.getElementsByClassName('days')[0].innerHTML = days;
  55. idEl.getElementsByClassName('hours')[0].innerHTML = hours;
  56. idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
  57. idEl.getElementsByClassName('seconds')[0].innerHTML = secs;
  58.  
  59. clearTimeout(countUpFromTime.interval);
  60. countUpFromTime.interval = setTimeout(function(){ countUpFromTime(countFrom, id); }, 1000);
  61. }
  62. </script>
  63.  
  64.  
  65. <div class="countup" id="countup1">
  66. <span class="timeel days">00</span>
  67. <span class="timeel timeRefDays">days</span>
  68. <span class="timeel hours">00</span>
  69. <span class="timeel timeRefHours">hours</span>
  70. <span class="timeel minutes">00</span>
  71. <span class="timeel timeRefMinutes">minutes</span>
  72. <span class="timeel seconds">00</span>
  73. <span class="timeel timeRefSeconds">seconds</span>
  74. </div>
  75.  
  76. </body>
  77. </html>
Advertisement
Add Comment
Please, Sign In to add comment