├── clock.css
├── clock.js
└── index.html
/clock.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color:#58b1e7;
3 | }
4 | #clock {
5 | color: #fff;
6 | font-size: 195px;
7 | background-color: #000;
8 | padding: 0.5em 0em;
9 | width: 80%;
10 | margin: 0px auto;
11 | font-family: Helvetica,Arial;
12 | text-align: center;
13 | }
14 | #banner {
15 | color: #fefefe;
16 | font-size: 50px;
17 | text-align:center;
18 | background-color: #EB6C52;
19 | padding: 0.5em 0em;
20 | width: 80%;
21 | margin: 10% auto 0%;
22 | font-family: Helvetica;
23 | text-align: left;
24 | text-transform:uppercase;
25 | }
26 | span {
27 | margin-left:175px;
28 | }
--------------------------------------------------------------------------------
/clock.js:
--------------------------------------------------------------------------------
1 | setInterval(function () {
2 | var currentTime = new Date();
3 | var hours = currentTime.getHours();
4 | var minutes = currentTime.getMinutes();
5 | var seconds = currentTime.getSeconds();
6 | var period = "AM";
7 | if (hours >= 12) {
8 | period = "PM";
9 | }
10 | if (hours > 12) {
11 | hours = hours - 12;
12 | }
13 | if (seconds < 10) {
14 | seconds = "0" + seconds;
15 | }
16 | if (minutes < 10) {
17 | minutes = "0" + minutes;
18 | }
19 | var clockTime = hours + ":" + minutes + ":" + seconds + " " + period;
20 |
21 | var clock = document.getElementById('clock');
22 | clock.innerText = clockTime;
23 | }, 1000);
24 |
25 |
26 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Your local time
9 |
10 |
11 |
12 |
13 | Your local time
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------