├── 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 |
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 | */
--------------------------------------------------------------------------------