├── index.html ├── myscript.js └── mystyle.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Count down Timer 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Countdown Clock

15 |
16 |
17 | 18 |
Days
19 |
20 |
21 | 22 |
Hours
23 |
24 |
25 | 26 |
Minutes
27 |
28 |
29 | 30 |
Seconds
31 |
32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /myscript.js: -------------------------------------------------------------------------------- 1 | function getTimeRemaining(endtime) { 2 | var t = Date.parse(endtime) - Date.parse(new Date()); 3 | var seconds = Math.floor((t / 1000) % 60); 4 | var minutes = Math.floor((t / 1000 / 60) % 60); 5 | var hours = Math.floor((t / (1000 * 60 * 60)) % 24); 6 | var days = Math.floor(t / (1000 * 60 * 60 * 24)); 7 | return { 8 | 'total': t, 9 | 'days': days, 10 | 'hours': hours, 11 | 'minutes': minutes, 12 | 'seconds': seconds 13 | }; 14 | } 15 | 16 | function initializeClock(id, endtime) { 17 | var clock = document.getElementById(id); 18 | var daysSpan = clock.querySelector('.days'); 19 | var hoursSpan = clock.querySelector('.hours'); 20 | var minutesSpan = clock.querySelector('.minutes'); 21 | var secondsSpan = clock.querySelector('.seconds'); 22 | 23 | function updateClock() { 24 | var t = getTimeRemaining(endtime); 25 | daysSpan.innerHTML = t.days; 26 | hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 27 | minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 28 | secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 29 | 30 | if (t.total <= 0) { 31 | clearInterval(timeinterval); 32 | } 33 | } 34 | 35 | updateClock(); 36 | var timeinterval = setInterval(updateClock, 1000); 37 | } 38 | 39 | var deadline = new Date(Date.parse(new Date()) + 14 * 24 * 60 * 60 * 1000); 40 | initializeClock('clockdiv', deadline); -------------------------------------------------------------------------------- /mystyle.css: -------------------------------------------------------------------------------- 1 | 2 | body{ 3 | text-align: center; 4 | background: #FFF; 5 | font-family: sans-serif; 6 | font-weight: 100; 7 | } 8 | 9 | h1{ 10 | color: #396; 11 | font-weight: 100; 12 | font-size: 50px; 13 | margin: 135px 0px 20px; 14 | } 15 | 16 | #clockdiv{ 17 | font-family: sans-serif; 18 | color: #fff; 19 | display: inline-block; 20 | font-weight: 100; 21 | text-align: center; 22 | font-size: 55px; 23 | } 24 | 25 | #clockdiv > div{ 26 | padding: 50px; 27 | border-radius: 7px; 28 | background: #1F5A56; 29 | display: inline-block; 30 | } 31 | 32 | #clockdiv div > span{ 33 | padding: 65px; 34 | border-radius: 3px; 35 | background: #000; 36 | display: inline-block; 37 | } 38 | 39 | span.minutes {} 40 | 41 | span.minutes {} 42 | 43 | .smalltext{ 44 | padding-top: 5px; 45 | font-size: 25px; 46 | } 47 | 48 | 49 | /* 50 | 51 | body{ 52 | text-align: center; 53 | background: #00ECB9; 54 | font-family: sans-serif; 55 | font-weight: 100; 56 | } 57 | 58 | h1{ 59 | color: #396; 60 | font-weight: 100; 61 | font-size: 40px; 62 | margin: 40px 0px 20px; 63 | } 64 | 65 | #clockdiv{ 66 | font-family: sans-serif; 67 | color: #fff; 68 | display: inline-block; 69 | font-weight: 100; 70 | text-align: center; 71 | font-size: 30px; 72 | } 73 | 74 | #clockdiv > div{ 75 | padding: 10px; 76 | border-radius: 3px; 77 | background: #00BF96; 78 | display: inline-block; 79 | } 80 | 81 | #clockdiv div > span{ 82 | padding: 15px; 83 | border-radius: 3px; 84 | background: #00816A; 85 | display: inline-block; 86 | } 87 | 88 | .smalltext{ 89 | padding-top: 5px; 90 | font-size: 16px; 91 | } 92 | 93 | */ --------------------------------------------------------------------------------