This post contains a total of 60+ Hand-Picked JavaScript Clock Examples with Source Code. All these JavaScript clocks are made using JavaScript and Styled using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
Click a Code to Copy it.
JavaScript Clock Examples
1. By Fear of Code
Made by Fear of Code. A JavaScript digital clock with glitch effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
*,
*:before,
*:after {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html,
body {
height: 100%;
}
body {
font-family: 'Lato', sans-serif;
font-weight: 700;
background: #111;
color: #fff;
}
a.switcher {
display: block;
position: fixed;
text-decoration: none;
z-index: 999999999999;
right: 20px;
bottom: 20px;
width: 16px;
height: 16px;
background: transparent;
border: 2px solid #fff;
border-radius: 50%;
opacity: 0.15;
transition: opacity 0.15s;
}
a.switcher:hover {
opacity: 1;
}
a.switcher:before {
display: block;
content: '';
position: absolute;
border-radius: 4px;
width: 2px;
height: 5px;
background: #fff;
top: 0;
left: 5px;
}
.screen {
position: relative;
z-index: 1;
widht: 100%;
height: 100%;
overflow: hidden;
}
.figure {
display: block;
position: absolute;
z-index: 1;
width: 0;
height: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-top: 200px solid #fff;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 0 solid transparent;
}
.figure:before {
display: block;
content: '';
position: absolute;
z-index: 99;
width: 0;
height: 0;
top: -194px;
left: -90px;
margin: auto;
border-top: 180px solid #111;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: 0 solid transparent;
}
.figure-mask {
display: block;
position: absolute;
z-index: 99;
width: 0;
height: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-top: 200px solid transparent;
border-right: 100px solid #111;
border-left: 100px solid #111;
border-bottom: 0 solid transparent;
}
.clock {
display: block;
position: absolute;
z-index: 9;
width: 720px;
height: 128px;
text-align: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
cursor: default;
}
.clock span {
display: block;
position: relative;
font-size: 128px;
line-height: 1;
}
.clock.is-off {
-webkit-animation: is-off 2s linear infinite !important;
animation: is-off 2s linear infinite !important;
}
.glitch:before {
position: absolute;
z-index: 999999;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation: bg-move 2s linear infinite;
animation: bg-move 2s linear infinite;
background-size: 100% 8px;
background-image: linear-gradient(0, rgba(255,255,255,0.05) 10%, transparent 10%, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 60%, transparent 60%, transparent);
}
.glitch .figure,
.glitch .figure-mask {
transform: skewX(0deg) scaleY(1);
-webkit-animation: tr-bag 4s linear infinite;
animation: tr-bag 4s linear infinite;
}
.glitch .clock {
transform: skewX(0deg) scaleY(1);
-webkit-animation: clock-bag 4s linear infinite;
animation: clock-bag 4s linear infinite;
}
.glitch .clock span:before,
.glitch .clock span:after {
display: block;
content: attr(data-time);
position: absolute;
top: 0;
color: #fff;
background: #111;
overflow: hidden;
width: 720px;
height: 128px;
clip: rect(0, 900px, 0, 0);
}
.glitch .clock span:before {
left: -2px;
text-shadow: 2px 0 #00f;
animation: c2 1s infinite linear alternate-reverse;
}
.glitch .clock span:after {
left: 3px;
text-shadow: -2px 0 #f00;
animation: c1 2s infinite linear alternate-reverse;
}
@-webkit-keyframes is-off {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
56% {
opacity: 0;
}
57% {
opacity: 0;
}
58% {
opacity: 1;
}
71% {
transform: scaleY(1) skewX(0deg);
}
72% {
transform: scaleY(3) skewX(-60deg);
}
73% {
transform: scaleY(1) skewX(0deg);
}
80% {
opacity: 1;
}
81% {
opacity: 0;
}
84% {
opacity: 0;
}
85% {
opacity: 1;
}
91% {
transform: scaleX(1) scaleY(1) skewX(0deg);
color: #fff;
}
92% {
transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
color: #008000;
}
93% {
transform: scaleX(1) scaleY(1) skewX(0deg);
color: #fff;
}
}
@keyframes is-off {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
56% {
opacity: 0;
}
57% {
opacity: 0;
}
58% {
opacity: 1;
}
71% {
transform: scaleY(1) skewX(0deg);
}
72% {
transform: scaleY(3) skewX(-60deg);
}
73% {
transform: scaleY(1) skewX(0deg);
}
80% {
opacity: 1;
}
81% {
opacity: 0;
}
84% {
opacity: 0;
}
85% {
opacity: 1;
}
91% {
transform: scaleX(1) scaleY(1) skewX(0deg);
color: #fff;
}
92% {
transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
color: #008000;
}
93% {
transform: scaleX(1) scaleY(1) skewX(0deg);
color: #fff;
}
}
@-webkit-keyframes c1 {
0% {
clip: rect(45px, 9999px, 62px, 0);
}
5% {
clip: rect(76px, 9999px, 87px, 0);
}
10% {
clip: rect(57px, 9999px, 7px, 0);
}
15.000000000000002% {
clip: rect(47px, 9999px, 44px, 0);
}
20% {
clip: rect(73px, 9999px, 63px, 0);
}
25% {
clip: rect(12px, 9999px, 9px, 0);
}
30.000000000000004% {
clip: rect(34px, 9999px, 65px, 0);
}
35.00000000000001% {
clip: rect(95px, 9999px, 12px, 0);
}
40% {
clip: rect(54px, 9999px, 20px, 0);
}
45% {
clip: rect(37px, 9999px, 58px, 0);
}
50% {
clip: rect(14px, 9999px, 86px, 0);
}
55% {
clip: rect(95px, 9999px, 32px, 0);
}
60.00000000000001% {
clip: rect(94px, 9999px, 18px, 0);
}
65% {
clip: rect(47px, 9999px, 76px, 0);
}
70.00000000000001% {
clip: rect(63px, 9999px, 3px, 0);
}
75% {
clip: rect(55px, 9999px, 43px, 0);
}
80% {
clip: rect(66px, 9999px, 74px, 0);
}
85% {
clip: rect(93px, 9999px, 87px, 0);
}
90% {
clip: rect(45px, 9999px, 45px, 0);
}
95% {
clip: rect(52px, 9999px, 30px, 0);
}
100% {
clip: rect(68px, 9999px, 39px, 0);
}
}
@keyframes c1 {
0% {
clip: rect(45px, 9999px, 62px, 0);
}
5% {
clip: rect(76px, 9999px, 87px, 0);
}
10% {
clip: rect(57px, 9999px, 7px, 0);
}
15.000000000000002% {
clip: rect(47px, 9999px, 44px, 0);
}
20% {
clip: rect(73px, 9999px, 63px, 0);
}
25% {
clip: rect(12px, 9999px, 9px, 0);
}
30.000000000000004% {
clip: rect(34px, 9999px, 65px, 0);
}
35.00000000000001% {
clip: rect(95px, 9999px, 12px, 0);
}
40% {
clip: rect(54px, 9999px, 20px, 0);
}
45% {
clip: rect(37px, 9999px, 58px, 0);
}
50% {
clip: rect(14px, 9999px, 86px, 0);
}
55% {
clip: rect(95px, 9999px, 32px, 0);
}
60.00000000000001% {
clip: rect(94px, 9999px, 18px, 0);
}
65% {
clip: rect(47px, 9999px, 76px, 0);
}
70.00000000000001% {
clip: rect(63px, 9999px, 3px, 0);
}
75% {
clip: rect(55px, 9999px, 43px, 0);
}
80% {
clip: rect(66px, 9999px, 74px, 0);
}
85% {
clip: rect(93px, 9999px, 87px, 0);
}
90% {
clip: rect(45px, 9999px, 45px, 0);
}
95% {
clip: rect(52px, 9999px, 30px, 0);
}
100% {
clip: rect(68px, 9999px, 39px, 0);
}
}
@-webkit-keyframes c2 {
0% {
clip: rect(8px, 9999px, 60px, 0);
}
5% {
clip: rect(71px, 9999px, 15px, 0);
}
10% {
clip: rect(97px, 9999px, 78px, 0);
}
15.000000000000002% {
clip: rect(12px, 9999px, 24px, 0);
}
20% {
clip: rect(25px, 9999px, 86px, 0);
}
25% {
clip: rect(34px, 9999px, 66px, 0);
}
30.000000000000004% {
clip: rect(86px, 9999px, 54px, 0);
}
35.00000000000001% {
clip: rect(20px, 9999px, 11px, 0);
}
40% {
clip: rect(7px, 9999px, 71px, 0);
}
45% {
clip: rect(19px, 9999px, 65px, 0);
}
50% {
clip: rect(86px, 9999px, 94px, 0);
}
55% {
clip: rect(8px, 9999px, 84px, 0);
}
60.00000000000001% {
clip: rect(93px, 9999px, 68px, 0);
}
65% {
clip: rect(94px, 9999px, 26px, 0);
}
70.00000000000001% {
clip: rect(54px, 9999px, 30px, 0);
}
75% {
clip: rect(62px, 9999px, 20px, 0);
}
80% {
clip: rect(75px, 9999px, 58px, 0);
}
85% {
clip: rect(74px, 9999px, 28px, 0);
}
90% {
clip: rect(22px, 9999px, 38px, 0);
}
95% {
clip: rect(64px, 9999px, 25px, 0);
}
100% {
clip: rect(8px, 9999px, 45px, 0);
}
23% {
transform: scaleX(0.8);
}
}
@keyframes c2 {
0% {
clip: rect(8px, 9999px, 60px, 0);
}
5% {
clip: rect(71px, 9999px, 15px, 0);
}
10% {
clip: rect(97px, 9999px, 78px, 0);
}
15.000000000000002% {
clip: rect(12px, 9999px, 24px, 0);
}
20% {
clip: rect(25px, 9999px, 86px, 0);
}
25% {
clip: rect(34px, 9999px, 66px, 0);
}
30.000000000000004% {
clip: rect(86px, 9999px, 54px, 0);
}
35.00000000000001% {
clip: rect(20px, 9999px, 11px, 0);
}
40% {
clip: rect(7px, 9999px, 71px, 0);
}
45% {
clip: rect(19px, 9999px, 65px, 0);
}
50% {
clip: rect(86px, 9999px, 94px, 0);
}
55% {
clip: rect(8px, 9999px, 84px, 0);
}
60.00000000000001% {
clip: rect(93px, 9999px, 68px, 0);
}
65% {
clip: rect(94px, 9999px, 26px, 0);
}
70.00000000000001% {
clip: rect(54px, 9999px, 30px, 0);
}
75% {
clip: rect(62px, 9999px, 20px, 0);
}
80% {
clip: rect(75px, 9999px, 58px, 0);
}
85% {
clip: rect(74px, 9999px, 28px, 0);
}
90% {
clip: rect(22px, 9999px, 38px, 0);
}
95% {
clip: rect(64px, 9999px, 25px, 0);
}
100% {
clip: rect(8px, 9999px, 45px, 0);
}
23% {
transform: scaleX(0.8);
}
}
@-webkit-keyframes clock-bag {
0% {
transform: translate(1px, 4px);
}
2% {
transform: translate(1px, 1px);
}
4% {
transform: translate(2px, 1px);
}
6% {
transform: translate(5px, 4px);
}
8% {
transform: translate(5px, 4px);
}
10% {
transform: translate(5px, 3px);
}
12% {
transform: translate(2px, 2px);
}
14.000000000000002% {
transform: translate(2px, 4px);
}
16% {
transform: translate(1px, 1px);
}
18% {
transform: translate(4px, 1px);
}
20% {
transform: translate(1px, 3px);
}
22% {
transform: translate(3px, 4px);
}
24% {
transform: translate(2px, 2px);
}
26% {
transform: translate(3px, 2px);
}
28.000000000000004% {
transform: translate(4px, 2px);
}
30% {
transform: translate(1px, 4px);
}
32% {
transform: translate(2px, 4px);
}
34% {
transform: translate(5px, 5px);
}
36% {
transform: translate(1px, 5px);
}
38% {
transform: translate(4px, 2px);
}
40% {
transform: translate(5px, 1px);
}
42% {
transform: translate(3px, 5px);
}
44% {
transform: translate(3px, 2px);
}
46.00000000000001% {
transform: translate(3px, 4px);
}
48% {
transform: translate(2px, 2px);
}
50% {
transform: translate(4px, 3px);
}
52% {
transform: translate(4px, 2px);
}
54% {
transform: translate(4px, 5px);
}
56.00000000000001% {
transform: translate(5px, 3px);
}
58% {
transform: translate(2px, 1px);
}
60% {
transform: translate(1px, 4px);
}
62% {
transform: translate(2px, 3px);
}
64% {
transform: translate(5px, 2px);
}
66% {
transform: translate(3px, 4px);
}
68% {
transform: translate(2px, 3px);
}
70.00000000000001% {
transform: translate(5px, 2px);
}
72% {
transform: translate(5px, 4px);
}
74% {
transform: translate(1px, 3px);
}
76% {
transform: translate(5px, 1px);
}
78% {
transform: translate(5px, 2px);
}
80% {
transform: translate(3px, 4px);
}
82.00000000000001% {
transform: translate(3px, 1px);
}
84% {
transform: translate(1px, 2px);
}
86% {
transform: translate(1px, 1px);
}
88% {
transform: translate(5px, 5px);
}
90% {
transform: translate(4px, 2px);
}
92.00000000000001% {
transform: translate(5px, 5px);
}
94% {
transform: translate(5px, 5px);
}
96% {
transform: translate(2px, 1px);
}
98% {
transform: translate(2px, 5px);
}
100% {
transform: translate(2px, 1px);
}
1% {
transform: scaleY(1) skewX(0deg);
}
1.5% {
transform: scaleY(3) skewX(-60deg);
}
2% {
transform: scaleY(1) skewX(0deg);
}
51% {
transform: scaleX(1) scaleY(1) skewX(0deg);
}
52% {
transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
}
53% {
transform: scaleX(1) scaleY(1) skewX(0deg);
}
}
@keyframes clock-bag {
0% {
transform: translate(1px, 4px);
}
2% {
transform: translate(1px, 1px);
}
4% {
transform: translate(2px, 1px);
}
6% {
transform: translate(5px, 4px);
}
8% {
transform: translate(5px, 4px);
}
10% {
transform: translate(5px, 3px);
}
12% {
transform: translate(2px, 2px);
}
14.000000000000002% {
transform: translate(2px, 4px);
}
16% {
transform: translate(1px, 1px);
}
18% {
transform: translate(4px, 1px);
}
20% {
transform: translate(1px, 3px);
}
22% {
transform: translate(3px, 4px);
}
24% {
transform: translate(2px, 2px);
}
26% {
transform: translate(3px, 2px);
}
28.000000000000004% {
transform: translate(4px, 2px);
}
30% {
transform: translate(1px, 4px);
}
32% {
transform: translate(2px, 4px);
}
34% {
transform: translate(5px, 5px);
}
36% {
transform: translate(1px, 5px);
}
38% {
transform: translate(4px, 2px);
}
40% {
transform: translate(5px, 1px);
}
42% {
transform: translate(3px, 5px);
}
44% {
transform: translate(3px, 2px);
}
46.00000000000001% {
transform: translate(3px, 4px);
}
48% {
transform: translate(2px, 2px);
}
50% {
transform: translate(4px, 3px);
}
52% {
transform: translate(4px, 2px);
}
54% {
transform: translate(4px, 5px);
}
56.00000000000001% {
transform: translate(5px, 3px);
}
58% {
transform: translate(2px, 1px);
}
60% {
transform: translate(1px, 4px);
}
62% {
transform: translate(2px, 3px);
}
64% {
transform: translate(5px, 2px);
}
66% {
transform: translate(3px, 4px);
}
68% {
transform: translate(2px, 3px);
}
70.00000000000001% {
transform: translate(5px, 2px);
}
72% {
transform: translate(5px, 4px);
}
74% {
transform: translate(1px, 3px);
}
76% {
transform: translate(5px, 1px);
}
78% {
transform: translate(5px, 2px);
}
80% {
transform: translate(3px, 4px);
}
82.00000000000001% {
transform: translate(3px, 1px);
}
84% {
transform: translate(1px, 2px);
}
86% {
transform: translate(1px, 1px);
}
88% {
transform: translate(5px, 5px);
}
90% {
transform: translate(4px, 2px);
}
92.00000000000001% {
transform: translate(5px, 5px);
}
94% {
transform: translate(5px, 5px);
}
96% {
transform: translate(2px, 1px);
}
98% {
transform: translate(2px, 5px);
}
100% {
transform: translate(2px, 1px);
}
1% {
transform: scaleY(1) skewX(0deg);
}
1.5% {
transform: scaleY(3) skewX(-60deg);
}
2% {
transform: scaleY(1) skewX(0deg);
}
51% {
transform: scaleX(1) scaleY(1) skewX(0deg);
}
52% {
transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
}
53% {
transform: scaleX(1) scaleY(1) skewX(0deg);
}
}
@-webkit-keyframes tr-bag {
0% {
transform: translate(5px, 5px);
}
2% {
transform: translate(4px, 5px);
}
4% {
transform: translate(4px, 3px);
}
6% {
transform: translate(4px, 4px);
}
8% {
transform: translate(3px, 2px);
}
10% {
transform: translate(4px, 5px);
}
12% {
transform: translate(1px, 5px);
}
14.000000000000002% {
transform: translate(4px, 4px);
}
16% {
transform: translate(5px, 2px);
}
18% {
transform: translate(1px, 3px);
}
20% {
transform: translate(1px, 2px);
}
22% {
transform: translate(3px, 4px);
}
24% {
transform: translate(4px, 1px);
}
26% {
transform: translate(1px, 1px);
}
28.000000000000004% {
transform: translate(3px, 5px);
}
30% {
transform: translate(2px, 1px);
}
32% {
transform: translate(1px, 5px);
}
34% {
transform: translate(3px, 2px);
}
36% {
transform: translate(4px, 1px);
}
38% {
transform: translate(1px, 1px);
}
40% {
transform: translate(3px, 2px);
}
42% {
transform: translate(3px, 2px);
}
44% {
transform: translate(4px, 3px);
}
46.00000000000001% {
transform: translate(3px, 1px);
}
48% {
transform: translate(1px, 1px);
}
50% {
transform: translate(1px, 5px);
}
52% {
transform: translate(1px, 4px);
}
54% {
transform: translate(1px, 5px);
}
56.00000000000001% {
transform: translate(4px, 4px);
}
58% {
transform: translate(3px, 5px);
}
60% {
transform: translate(1px, 3px);
}
62% {
transform: translate(2px, 5px);
}
64% {
transform: translate(4px, 5px);
}
66% {
transform: translate(1px, 2px);
}
68% {
transform: translate(1px, 2px);
}
70.00000000000001% {
transform: translate(2px, 1px);
}
72% {
transform: translate(3px, 4px);
}
74% {
transform: translate(2px, 2px);
}
76% {
transform: translate(5px, 1px);
}
78% {
transform: translate(3px, 1px);
}
80% {
transform: translate(2px, 4px);
}
82.00000000000001% {
transform: translate(4px, 2px);
}
84% {
transform: translate(5px, 2px);
}
86% {
transform: translate(2px, 4px);
}
88% {
transform: translate(5px, 2px);
}
90% {
transform: translate(5px, 1px);
}
92.00000000000001% {
transform: translate(2px, 2px);
}
94% {
transform: translate(1px, 5px);
}
96% {
transform: translate(1px, 2px);
}
98% {
transform: translate(2px, 2px);
}
100% {
transform: translate(5px, 1px);
}
1% {
transform: scaleY(1) skewX(0deg);
}
1.5% {
transform: scaleY(3) skewX(-60deg);
}
2% {
transform: scaleY(1) skewX(0deg);
}
51% {
transform: scaleX(1) scaleY(1) skewX(0deg);
}
52% {
transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
}
53% {
transform: scaleX(1) scaleY(1) skewX(0deg);
}
}
@keyframes tr-bag {
0% {
transform: translate(5px, 5px);
}
2% {
transform: translate(4px, 5px);
}
4% {
transform: translate(4px, 3px);
}
6% {
transform: translate(4px, 4px);
}
8% {
transform: translate(3px, 2px);
}
10% {
transform: translate(4px, 5px);
}
12% {
transform: translate(1px, 5px);
}
14.000000000000002% {
transform: translate(4px, 4px);
}
16% {
transform: translate(5px, 2px);
}
18% {
transform: translate(1px, 3px);
}
20% {
transform: translate(1px, 2px);
}
22% {
transform: translate(3px, 4px);
}
24% {
transform: translate(4px, 1px);
}
26% {
transform: translate(1px, 1px);
}
28.000000000000004% {
transform: translate(3px, 5px);
}
30% {
transform: translate(2px, 1px);
}
32% {
transform: translate(1px, 5px);
}
34% {
transform: translate(3px, 2px);
}
36% {
transform: translate(4px, 1px);
}
38% {
transform: translate(1px, 1px);
}
40% {
transform: translate(3px, 2px);
}
42% {
transform: translate(3px, 2px);
}
44% {
transform: translate(4px, 3px);
}
46.00000000000001% {
transform: translate(3px, 1px);
}
48% {
transform: translate(1px, 1px);
}
50% {
transform: translate(1px, 5px);
}
52% {
transform: translate(1px, 4px);
}
54% {
transform: translate(1px, 5px);
}
56.00000000000001% {
transform: translate(4px, 4px);
}
58% {
transform: translate(3px, 5px);
}
60% {
transform: translate(1px, 3px);
}
62% {
transform: translate(2px, 5px);
}
64% {
transform: translate(4px, 5px);
}
66% {
transform: translate(1px, 2px);
}
68% {
transform: translate(1px, 2px);
}
70.00000000000001% {
transform: translate(2px, 1px);
}
72% {
transform: translate(3px, 4px);
}
74% {
transform: translate(2px, 2px);
}
76% {
transform: translate(5px, 1px);
}
78% {
transform: translate(3px, 1px);
}
80% {
transform: translate(2px, 4px);
}
82.00000000000001% {
transform: translate(4px, 2px);
}
84% {
transform: translate(5px, 2px);
}
86% {
transform: translate(2px, 4px);
}
88% {
transform: translate(5px, 2px);
}
90% {
transform: translate(5px, 1px);
}
92.00000000000001% {
transform: translate(2px, 2px);
}
94% {
transform: translate(1px, 5px);
}
96% {
transform: translate(1px, 2px);
}
98% {
transform: translate(2px, 2px);
}
100% {
transform: translate(5px, 1px);
}
1% {
transform: scaleY(1) skewX(0deg);
}
1.5% {
transform: scaleY(3) skewX(-60deg);
}
2% {
transform: scaleY(1) skewX(0deg);
}
51% {
transform: scaleX(1) scaleY(1) skewX(0deg);
}
52% {
transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
}
53% {
transform: scaleX(1) scaleY(1) skewX(0deg);
}
}
@-webkit-keyframes bg-move {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -32px;
}
}
@keyframes bg-move {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -32px;
}
}
</style>
</head>
<body>
<a class="switcher" href="#"></a>
<div class="screen glitch">
<div class="clock is-off"><span class="time" data-time=""></span></div>
<div class="figure"></div>
<div class="figure-mask"></div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(document).ready(function () {
function second_passed() {
$('.clock').removeClass('is-off');
}
setTimeout(second_passed, 2000);
$('.switcher').on('click', function (e) {
e.preventDefault();
$('.screen').toggleClass('glitch');
});
var newDate = new Date();
newDate.setDate(newDate.getDate());
setInterval(function () {
var hours = new Date().getHours();
var seconds = new Date().getSeconds();
var minutes = new Date().getMinutes();
var realTime = (hours < 10 ? '0' : '') + hours + ' : ' + (minutes < 10 ? '0' : '') + minutes + ' : ' + (seconds < 10 ? '0' : '') + seconds;
$('.time').html(realTime);
$('.time').attr('data-time', realTime);
}, 1000);
});
</script>
</body>
</html>2. By Jason Lee Wilson
Made by Jason Lee Wilson. Javascript Clock with Milliseconds. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {background-color:#2d2d2d;}
#timedate {
font: small-caps lighter 43px/150% "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
text-align:left;
width: 50%;
margin: 40px auto;
color:#fff;
border-left: 3px solid #ed1f24;
padding: 20px;
}
</style>
</head>
<body>
<body onLoad="initClock()">
<div id="timedate">
<a id="mon">January</a>
<a id="d">1</a>,
<a id="y">0</a><br />
<a id="h">12</a> :
<a id="m">00</a>:
<a id="s">00</a>:
<a id="mi">000</a>
</div>
<script>
// START CLOCK SCRIPT
Number.prototype.pad = function (n) {
for (var r = this.toString(); r.length < n; r = 0 + r);
return r;
};
function updateClock() {
var now = new Date();
var milli = now.getMilliseconds(),
sec = now.getSeconds(),
min = now.getMinutes(),
hou = now.getHours(),
mo = now.getMonth(),
dy = now.getDate(),
yr = now.getFullYear();
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var tags = ["mon", "d", "y", "h", "m", "s", "mi"],
corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli];
for (var i = 0; i < tags.length; i++)
document.getElementById(tags[i]).firstChild.nodeValue = corr[i];
}
function initClock() {
updateClock();
window.setInterval("updateClock()", 1);
}
</script>
</body>
</html>3. By Matt Smith
Made by Matt Smith. A simple countdown timer. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* general styling */
:root {
--smaller: .75;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
margin: 0;
}
body {
align-items: center;
background-color: #ffd54f;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
.container {
color: #333;
margin: 0 auto;
text-align: center;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 4.5rem;
}
.emoji {
display: none;
padding: 1rem;
}
.emoji span {
font-size: 4rem;
padding: 0 .5rem;
}
@media all and (max-width: 768px) {
h1 {
font-size: calc(1.5rem * var(--smaller));
}
li {
font-size: calc(1.125rem * var(--smaller));
}
li span {
font-size: calc(3.375rem * var(--smaller));
}
}
</style>
</head>
<body>
<div class="container">
<h1 id="headline">Countdown to my birthday</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
<div id="content" class="emoji">
<span>🥳</span>
<span>🎉</span>
<span>🎂</span>
</div>
</div>
<script>
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
//I'm adding this section so I don't have to keep updating this pen every year :-)
//remove this if you don't need it
let today = new Date(),
dd = String(today.getDate()).padStart(2, "0"),
mm = String(today.getMonth() + 1).padStart(2, "0"),
yyyy = today.getFullYear(),
nextYear = yyyy + 1,
dayMonth = "09/30/",
birthday = dayMonth + yyyy;
today = mm + "/" + dd + "/" + yyyy;
if (today > birthday) {
birthday = dayMonth + nextYear;
}
//end
const countDown = new Date(birthday).getTime(),
x = setInterval(function () {
const now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / day),
document.getElementById("hours").innerText = Math.floor(distance % day / hour),
document.getElementById("minutes").innerText = Math.floor(distance % hour / minute),
document.getElementById("seconds").innerText = Math.floor(distance % minute / second);
//do something later when date is reached
if (distance < 0) {
document.getElementById("headline").innerText = "It's my birthday!";
document.getElementById("countdown").style.display = "none";
document.getElementById("content").style.display = "block";
clearInterval(x);
}
//seconds
}, 0);
})();
</script>
</body>
</html>4. By Aaron Farrar
Made by Aaron Farrar. Basic digital clock. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Orbitron'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Aldrich'>
<style>
body {
background: black;
}
.clock {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #17D4FE;
font-size: 60px;
font-family: Orbitron;
letter-spacing: 7px;
}
</style>
</head>
<body>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<script>
function showTime() {
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if (h == 0) {
h = 12;
}
if (h > 12) {
h = h - 12;
session = "PM";
}
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
</body>
</html>5. By Toshiyuki TAKAHASHI
Made by Toshiyuki TAKAHASHI. Digital Clock with Vue.js. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Share+Tech+Mono'>
<style>
html, body {
height: 100%;
}
body {
background: #0f3854;
background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
background-size: 100%;
}
p {
margin: 0;
padding: 0;
}
#clock {
font-family: "Share Tech Mono", monospace;
color: #ffffff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #daf6ff;
text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
letter-spacing: 0.05em;
font-size: 80px;
padding: 5px 0;
}
#clock .date {
letter-spacing: 0.1em;
font-size: 24px;
}
#clock .text {
letter-spacing: 0.1em;
font-size: 12px;
padding: 20px 0 0;
}
</style>
</head>
<body>
<div id="clock">
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
<p class="text">DIGITAL CLOCK with Vue.js</p>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script>
var clock = new Vue({
el: '#clock',
data: {
time: '',
date: '' } });
var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
var cd = new Date();
clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};
function zeroPadding(num, digit) {
var zero = '';
for (var i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
</script>
</body>
</html>6. By Matt Litzinger
Made by Matt Litzinger. Countdown clock. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
font: normal 13px/20px Arial, Helvetica, sans-serif; word-wrap:break-word;
color: #eee;
background: #353535;
}
#countdown{
width: 465px;
height: 112px;
text-align: center;
background: #222;
background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
background-image: -o-linear-gradient(top, #222, #333, #333, #222);
border: 1px solid #111;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
margin: auto;
padding: 24px 0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
#countdown:before{
content:"";
width: 8px;
height: 65px;
background: #444;
background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
display: block;
position: absolute;
top: 48px; left: -10px;
}
#countdown:after{
content:"";
width: 8px;
height: 65px;
background: #444;
background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
display: block;
position: absolute;
top: 48px; right: -10px;
}
#countdown #tiles{
position: relative;
z-index: 1;
}
#countdown #tiles > span{
width: 92px;
max-width: 92px;
font: bold 48px 'Droid Sans', Arial, sans-serif;
text-align: center;
color: #111;
background-color: #ddd;
background-image: -webkit-linear-gradient(top, #bbb, #eee);
background-image: -moz-linear-gradient(top, #bbb, #eee);
background-image: -ms-linear-gradient(top, #bbb, #eee);
background-image: -o-linear-gradient(top, #bbb, #eee);
border-top: 1px solid #fff;
border-radius: 3px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
margin: 0 7px;
padding: 18px 0;
display: inline-block;
position: relative;
}
#countdown #tiles > span:before{
content:"";
width: 100%;
height: 13px;
background: #111;
display: block;
padding: 0 3px;
position: absolute;
top: 41%; left: -3px;
z-index: -1;
}
#countdown #tiles > span:after{
content:"";
width: 100%;
height: 1px;
background: #eee;
border-top: 1px solid #333;
display: block;
position: absolute;
top: 48%; left: 0;
}
#countdown .labels{
width: 100%;
height: 25px;
text-align: center;
position: absolute;
bottom: 8px;
}
#countdown .labels li{
width: 102px;
font: bold 15px 'Droid Sans', Arial, sans-serif;
color: #f47321;
text-shadow: 1px 1px 0px #000;
text-align: center;
text-transform: uppercase;
display: inline-block;
}
</style>
</head>
<body>
<div id="countdown">
<div id='tiles'></div>
<div class="labels">
<li>Days</li>
<li>Hours</li>
<li>Mins</li>
<li>Secs</li>
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
var target_date = new Date().getTime() + 1000 * 3600 * 48; // set the countdown date
var days, hours, minutes, seconds; // variables for time units
var countdown = document.getElementById("tiles"); // get tag element
getCountdown();
setInterval(function () {getCountdown();}, 1000);
function getCountdown() {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = pad(parseInt(seconds_left / 86400));
seconds_left = seconds_left % 86400;
hours = pad(parseInt(seconds_left / 3600));
seconds_left = seconds_left % 3600;
minutes = pad(parseInt(seconds_left / 60));
seconds = pad(parseInt(seconds_left % 60));
// format countdown string + set tag value
countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
}
function pad(n) {
return (n < 10 ? '0' : '') + n;
}
</script>
</body>
</html>7. By Rik Schennink
Made by Rik Schennink. Mother Flippin Clock. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body {
padding:0;
margin:0;
background:#fafafa;
text-align:center;
}
body {
padding-top:3em;
}
h1,
h2 {
margin-bottom:3rem;
font-family:sans-serif;
color:#666;
}
h2 {
margin-top:2em;
}
.clock {
position:relative;
font-family:monaco,consolas,"courier new",monospace;
font-size:3.5rem;
line-height:1.375;
}
.clock:before,
.clock:after {
position:absolute;
top:0;
bottom:0;
content:':';
z-index:2;
line-height:1.15;
color:#333;
}
.clock:before {
left:2.325em;
}
.clock:after {
right:2.325em;
}
.clock span {
position:relative;
display:inline-block;
padding:0 .25em;
margin:0 .06125em;
z-index:1;
-webkit-transform:perspective(750);
-moz-transform:perspective(750);
-ms-transform:perspective(750);
transform:perspective(750);
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.clock span:first-child {
margin-left:0;
}
.clock span:last-child {
margin-right:0;
}
.clock span:nth-child(2),
.clock span:nth-child(4) {
margin-right:.3em;
}
.clock span:nth-child(3),
.clock span:nth-child(5) {
margin-left:.3em;
}
.clock span:before,
.clock span:after {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
color:#eee;
text-shadow:0 1px 0 #fff;
background:#333;
border-radius:.125em;
outline:1px solid transparent; /* fix jagged edges in ff */
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transition:-webkit-transform .75s, opacity .75s;
-moz-transition:-moz-transform .75s, opacity .75s;
-ms-transition:-ms-transform .75s, opacity .75s;
transition:transform .75s, opacity .75s;
}
.clock span:before {
opacity:1;
z-index:1;
content:attr(data-old);
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:translate3d(0,0,0) rotateX(0);
-moz-transform:translate3d(0,0,0) rotateX(0);
-ms-transform:translate3d(0,0,0) rotateX(0);
transform:translate3d(0,0,0) rotateX(0);
}
.clock span:after {
opacity:0;
z-index:2;
content:attr(data-now);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
transform-origin:0 100%;
-webkit-transform:translate3d(0,-102.5%,0) rotateX(90deg);
-moz-transform:translate3d(0,-102.5%,0) rotateX(90deg);
-ms-transform:translate3d(0,-102.5%,0) rotateX(90deg);
transform:translate3d(0,-102.5%,0) rotateX(90deg);
}
.clock .flip:before {
opacity:0;
-webkit-transform:translate3d(0,102.5%,0) rotateX(-90deg);
-moz-transform:translate3d(0,102.5%,0) rotateX(-90deg);
-ms-transform:translate3d(0,102.5%,0) rotateX(-90deg);
transform:translate3d(0,102.5%,0) rotateX(-90deg);
}
.clock .flip:after {
opacity:1;
-webkit-transform:translate3d(0,0,0) rotateX(0);
-moz-transform:translate3d(0,0,0) rotateX(0);
-ms-transform:translate3d(0,0,0) rotateX(0);
transform:translate3d(0,0,0) rotateX(0);
}
</style>
</head>
<body>
<h1>Mother Flippin Clock!</h1>
<span class="clock"></span>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script>
var Clock = function () {
var exports = function (element) {
this._element = element;
var html = '';
for (var i = 0; i < 6; i++) {if (window.CP.shouldStopExecution(0)) break;
html += '<span> </span>';
}window.CP.exitedLoop(0);
this._element.innerHTML = html;
this._slots = this._element.getElementsByTagName('span');
this._tick();
};
exports.prototype = {
_tick: function () {
var time = new Date();
this._update(this._pad(time.getHours()) + this._pad(time.getMinutes()) + this._pad(time.getSeconds()));
var self = this;
setTimeout(function () {
self._tick();
}, 1000);
},
_pad: function (value) {
return ('0' + value).slice(-2);
},
_update: function (timeString) {
var i = 0,l = this._slots.length,value,slot,now;
for (; i < l; i++) {if (window.CP.shouldStopExecution(1)) break;
value = timeString.charAt(i);
slot = this._slots[i];
now = slot.dataset.now;
if (!now) {
slot.dataset.now = value;
slot.dataset.old = value;
continue;
}
if (now !== value) {
this._flip(slot, value);
}
}window.CP.exitedLoop(1);
},
_flip: function (slot, value) {
// setup new state
slot.classList.remove('flip');
slot.dataset.old = slot.dataset.now;
slot.dataset.now = value;
// force dom reflow
slot.offsetLeft;
// start flippin
slot.classList.add('flip');
} };
return exports;
}();
var i = 0,clocks = document.querySelectorAll('.clock'),l = clocks.length;
for (; i < l; i++) {if (window.CP.shouldStopExecution(2)) break;
new Clock(clocks[i]);
}window.CP.exitedLoop(2);
</script>
</body>
</html>8. By Felix De Montis
Made by Felix De Montis. Simple wall clock. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
body {
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.clock {
height: 20vh;
color: white;
font-size: 22vh;
font-family: sans-serif;
line-height: 20.4vh;
display: flex;
position: relative;
/*background: green;*/
overflow: hidden;
}
.clock::before, .clock::after {
content: '';
width: 7ch;
height: 3vh;
background: linear-gradient(to top, transparent, black);
position: absolute;
z-index: 2;
}
.clock::after {
bottom: 0;
background: linear-gradient(to bottom, transparent, black);
}
.clock > div {
display: flex;
}
.tick {
line-height: 17vh;
}
.tick-hidden {
opacity: 0;
}
.move {
-webkit-animation: move linear 1s infinite;
animation: move linear 1s infinite;
}
@-webkit-keyframes move {
from {
transform: translateY(0vh);
}
to {
transform: translateY(-20vh);
}
}
@keyframes move {
from {
transform: translateY(0vh);
}
to {
transform: translateY(-20vh);
}
}
</style>
</head>
<body>
<div class="clock">
<div class="hours">
<div class="first">
<div class="number">0</div>
</div>
<div class="second">
<div class="number">0</div>
</div>
</div>
<div class="tick">:</div>
<div class="minutes">
<div class="first">
<div class="number">0</div>
</div>
<div class="second">
<div class="number">0</div>
</div>
</div>
<div class="tick">:</div>
<div class="seconds">
<div class="first">
<div class="number">0</div>
</div>
<div class="second infinite">
<div class="number">0</div>
</div>
</div>
</div>
<script>
var hoursContainer = document.querySelector('.hours');
var minutesContainer = document.querySelector('.minutes');
var secondsContainer = document.querySelector('.seconds');
var tickElements = Array.from(document.querySelectorAll('.tick'));
var last = new Date(0);
last.setUTCHours(-1);
var tickState = true;
function updateTime() {
var now = new Date();
var lastHours = last.getHours().toString();
var nowHours = now.getHours().toString();
if (lastHours !== nowHours) {
updateContainer(hoursContainer, nowHours);
}
var lastMinutes = last.getMinutes().toString();
var nowMinutes = now.getMinutes().toString();
if (lastMinutes !== nowMinutes) {
updateContainer(minutesContainer, nowMinutes);
}
var lastSeconds = last.getSeconds().toString();
var nowSeconds = now.getSeconds().toString();
if (lastSeconds !== nowSeconds) {
//tick()
updateContainer(secondsContainer, nowSeconds);
}
last = now;
}
function tick() {
tickElements.forEach(t => t.classList.toggle('tick-hidden'));
}
function updateContainer(container, newTime) {
var time = newTime.split('');
if (time.length === 1) {
time.unshift('0');
}
var first = container.firstElementChild;
if (first.lastElementChild.textContent !== time[0]) {
updateNumber(first, time[0]);
}
var last = container.lastElementChild;
if (last.lastElementChild.textContent !== time[1]) {
updateNumber(last, time[1]);
}
}
function updateNumber(element, number) {
//element.lastElementChild.textContent = number
var second = element.lastElementChild.cloneNode(true);
second.textContent = number;
element.appendChild(second);
element.classList.add('move');
setTimeout(function () {
element.classList.remove('move');
}, 990);
setTimeout(function () {
element.removeChild(element.firstElementChild);
}, 990);
}
setInterval(updateTime, 100);
</script>
</body>
</html>9. By Maneesh
Made by Maneesh. JavaScript Digital Analog Clock. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@-webkit-keyframes spin-one {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin-one {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes spin-two {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(540deg);
}
}
@keyframes spin-two {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(540deg);
}
}
html, body {
height: 100%;
}
body {
background: #dedede;
background: linear-gradient(45deg, #dedede 0%, #efefef 100%);
}
.wrapper {
width: 100%;
min-width: 840px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.digit {
max-width: calc((60px + 4px) * 3);
float: left;
}
.sep {
max-width: calc((60px + 4px) * 1);
float: left;
}
.sep .clock #hand-1 {
-webkit-animation: spin-one 10s linear infinite;
animation: spin-one 10s linear infinite;
}
.sep .clock #hand-2 {
-webkit-animation: spin-two 10s linear infinite alternate;
animation: spin-two 10s linear infinite alternate;
}
.clock {
width: 60px;
height: 60px;
background: linear-gradient(270deg, #eee 0%, #fff 100%);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
border-radius: 100%;
position: relative;
margin: 2px;
float: left;
}
.clock span {
position: absolute;
top: calc(50% - 1px);
left: 50%;
width: 49%;
height: 2px;
background: #323232;
transform-origin: 0% 50%;
transform: rotate(270deg);
transition: all ease 2s;
}
.clock span:before {
content: "";
position: absolute;
top: 0;
left: -1px;
width: 2px;
height: 2px;
display: block;
background: inherit;
border-radius: 100%;
}
#clock-1 #hand-1, #clock-9 #hand-1 {
transition: all ease-in 1.5s;
}
#clock-1 #hand-2, #clock-9 #hand-2 {
transition: all ease 2s;
}
#clock-2 #hand-1, #clock-10 #hand-1 {
transition: all ease-out 4s;
}
#clock-2 #hand-2, #clock-10 #hand-2 {
transition: all ease-in 1.75s;
}
#clock-3 #hand-1, #clock-11 #hand-1 {
transition: all linear 3s;
}
#clock-3 #hand-2, #clock-11 #hand-2 {
transition: all ease-in 1s;
}
#clock-4 #hand-1, #clock-12 #hand-1 {
transition: all ease-out 2.3s;
}
#clock-4 #hand-2, #clock-12 #hand-2 {
transition: all ease 2.15s;
}
#clock-5 #hand-1, #clock-13 #hand-1 {
transition: all ease-in 4s;
}
#clock-5 #hand-2, #clock-13 #hand-2 {
transition: all ease-out 3s;
}
#clock-6 #hand-1, #clock-14 #hand-1, #clock-18 #hand-1 {
transition: all linear 2.3s;
}
#clock-6 #hand-2, #clock-14 #hand-2, #clock-18 #hand-2 {
transition: all ease-out 1.2s;
}
#clock-7 #hand-1, #clock-15 #hand-1 {
transition: all ease-in 4s;
}
#clock-7 #hand-2, #clock-15 #hand-2 {
transition: all ease 1.5s;
}
#clock-8 #hand-1, #clock-16 #hand-1 {
transition: all ease 2s;
}
#clock-8 #hand-2, #clock-16 #hand-2 {
transition: all ease 2.6s;
}
#clock-9 #hand-1, #clock-17 #hand-1 {
transition: all linear 1.3s;
}
#clock-9 #hand-2, #clock-17 #hand-2 {
transition: all ease 2.4s;
}
.t-1 #clock-2 #hand-1 {
transform: rotate(0deg);
}
.t-1 #clock-2 #hand-2 {
transform: rotate(90deg);
}
.t-1 #clock-3 #hand-1 {
transform: rotate(180deg);
}
.t-1 #clock-3 #hand-2 {
transform: rotate(90deg);
}
.t-1 #clock-5 #hand-1, .t-1 #clock-6 #hand-1, .t-1 #clock-8 #hand-1, .t-1 #clock-9 #hand-1, .t-1 #clock-11 #hand-1, .t-1 #clock-12 #hand-1, .t-1 #clock-14 #hand-1, .t-1 #clock-15 #hand-1 {
transform: rotate(270deg);
}
.t-1 #clock-5 #hand-2, .t-1 #clock-6 #hand-2, .t-1 #clock-8 #hand-2, .t-1 #clock-9 #hand-2, .t-1 #clock-11 #hand-2, .t-1 #clock-12 #hand-2, .t-1 #clock-14 #hand-2, .t-1 #clock-15 #hand-2 {
transform: rotate(90deg);
}
.t-1 #clock-17 #hand-1 {
transform: rotate(270deg);
}
.t-1 #clock-17 #hand-2 {
transform: rotate(0deg);
}
.t-1 #clock-18 #hand-1 {
transform: rotate(270deg);
}
.t-1 #clock-18 #hand-2 {
transform: rotate(180deg);
}
.t-2 #clock-1 #hand-1, .t-2 #clock-7 #hand-1, .t-2 #clock-11 #hand-1 {
transform: rotate(0deg);
}
.t-2 #clock-1 #hand-2, .t-2 #clock-7 #hand-2, .t-2 #clock-11 #hand-2 {
transform: rotate(90deg);
}
.t-2 #clock-2 #hand-1, .t-2 #clock-17 #hand-1 {
transform: rotate(0deg);
}
.t-2 #clock-2 #hand-2, .t-2 #clock-17 #hand-2 {
transform: rotate(180deg);
}
.t-2 #clock-3 #hand-1, .t-2 #clock-15 #hand-1 {
transform: rotate(180deg);
}
.t-2 #clock-3 #hand-2, .t-2 #clock-15 #hand-2 {
transform: rotate(90deg);
}
.t-2 #clock-4 #hand-1, .t-2 #clock-14 #hand-1, .t-2 #clock-16 #hand-1 {
transform: rotate(270deg);
}
.t-2 #clock-4 #hand-2, .t-2 #clock-14 #hand-2, .t-2 #clock-16 #hand-2 {
transform: rotate(0deg);
}
.t-2 #clock-5 #hand-1 {
transform: rotate(180deg);
}
.t-2 #clock-5 #hand-2 {
transform: rotate(90deg);
}
.t-2 #clock-6 #hand-1, .t-2 #clock-9 #hand-1, .t-2 #clock-10 #hand-1, .t-2 #clock-13 #hand-1 {
transform: rotate(270deg);
}
.t-2 #clock-6 #hand-2, .t-2 #clock-9 #hand-2, .t-2 #clock-10 #hand-2, .t-2 #clock-13 #hand-2 {
transform: rotate(90deg);
}
.t-2 #clock-8 #hand-1, .t-2 #clock-12 #hand-1, .t-2 #clock-18 #hand-1 {
transform: rotate(270deg);
}
.t-2 #clock-8 #hand-2, .t-2 #clock-12 #hand-2, .t-2 #clock-18 #hand-2 {
transform: rotate(180deg);
}
.t-3 #clock-1 #hand-1, .t-3 #clock-7 #hand-1, .t-3 #clock-13 #hand-1 {
transform: rotate(0deg);
}
.t-3 #clock-1 #hand-2, .t-3 #clock-7 #hand-2, .t-3 #clock-13 #hand-2 {
transform: rotate(90deg);
}
.t-3 #clock-2 #hand-1, .t-3 #clock-17 #hand-1 {
transform: rotate(0deg);
}
.t-3 #clock-2 #hand-2, .t-3 #clock-17 #hand-2 {
transform: rotate(180deg);
}
.t-3 #clock-3 #hand-1, .t-3 #clock-11 #hand-1 {
transform: rotate(180deg);
}
.t-3 #clock-3 #hand-2, .t-3 #clock-11 #hand-2 {
transform: rotate(90deg);
}
.t-3 #clock-4 #hand-1, .t-3 #clock-10 #hand-1, .t-3 #clock-16 #hand-1 {
transform: rotate(270deg);
}
.t-3 #clock-4 #hand-2, .t-3 #clock-10 #hand-2, .t-3 #clock-16 #hand-2 {
transform: rotate(0deg);
}
.t-3 #clock-5 #hand-1 {
transform: rotate(180deg);
}
.t-3 #clock-5 #hand-2 {
transform: rotate(90deg);
}
.t-3 #clock-6 #hand-1, .t-3 #clock-9 #hand-1, .t-3 #clock-12 #hand-1, .t-3 #clock-15 #hand-1 {
transform: rotate(270deg);
}
.t-3 #clock-6 #hand-2, .t-3 #clock-9 #hand-2, .t-3 #clock-12 #hand-2, .t-3 #clock-15 #hand-2 {
transform: rotate(90deg);
}
.t-3 #clock-8 #hand-1, .t-3 #clock-14 #hand-1, .t-3 #clock-18 #hand-1 {
transform: rotate(270deg);
}
.t-3 #clock-8 #hand-2, .t-3 #clock-14 #hand-2, .t-3 #clock-18 #hand-2 {
transform: rotate(180deg);
}
.t-4 #clock-1 #hand-1 {
transform: rotate(0deg);
}
.t-4 #clock-1 #hand-2 {
transform: rotate(90deg);
}
.t-4 #clock-3 #hand-1, .t-4 #clock-11 #hand-1 {
transform: rotate(180deg);
}
.t-4 #clock-3 #hand-2, .t-4 #clock-11 #hand-2 {
transform: rotate(90deg);
}
.t-4 #clock-10 #hand-1, .t-4 #clock-17 #hand-1 {
transform: rotate(270deg);
}
.t-4 #clock-10 #hand-2, .t-4 #clock-17 #hand-2 {
transform: rotate(0deg);
}
.t-4 #clock-2 #hand-1 {
transform: rotate(180deg);
}
.t-4 #clock-2 #hand-2 {
transform: rotate(90deg);
}
.t-4 #clock-4 #hand-1, .t-4 #clock-5 #hand-1, .t-4 #clock-6 #hand-1, .t-4 #clock-7 #hand-1, .t-4 #clock-8 #hand-1, .t-4 #clock-9 #hand-1, .t-4 #clock-12 #hand-1, .t-4 #clock-14 #hand-1, .t-4 #clock-15 #hand-1 {
transform: rotate(270deg);
}
.t-4 #clock-4 #hand-2, .t-4 #clock-5 #hand-2, .t-4 #clock-6 #hand-2, .t-4 #clock-7 #hand-2, .t-4 #clock-8 #hand-2, .t-4 #clock-9 #hand-2, .t-4 #clock-12 #hand-2, .t-4 #clock-14 #hand-2, .t-4 #clock-15 #hand-2 {
transform: rotate(90deg);
}
.t-4 #clock-18 #hand-1 {
transform: rotate(270deg);
}
.t-4 #clock-18 #hand-2 {
transform: rotate(180deg);
}
.t-5 #clock-1 #hand-1, .t-5 #clock-5 #hand-1, .t-5 #clock-13 #hand-1 {
transform: rotate(0deg);
}
.t-5 #clock-1 #hand-2, .t-5 #clock-5 #hand-2, .t-5 #clock-13 #hand-2 {
transform: rotate(90deg);
}
.t-5 #clock-2 #hand-1, .t-5 #clock-17 #hand-1 {
transform: rotate(0deg);
}
.t-5 #clock-2 #hand-2, .t-5 #clock-17 #hand-2 {
transform: rotate(180deg);
}
.t-5 #clock-3 #hand-1, .t-5 #clock-9 #hand-1, .t-5 #clock-11 #hand-1 {
transform: rotate(180deg);
}
.t-5 #clock-3 #hand-2, .t-5 #clock-9 #hand-2, .t-5 #clock-11 #hand-2 {
transform: rotate(90deg);
}
.t-5 #clock-8 #hand-1, .t-5 #clock-10 #hand-1, .t-5 #clock-16 #hand-1 {
transform: rotate(270deg);
}
.t-5 #clock-8 #hand-2, .t-5 #clock-10 #hand-2, .t-5 #clock-16 #hand-2 {
transform: rotate(0deg);
}
.t-5 #clock-4 #hand-1, .t-5 #clock-7 #hand-1, .t-5 #clock-12 #hand-1, .t-5 #clock-15 #hand-1 {
transform: rotate(270deg);
}
.t-5 #clock-4 #hand-2, .t-5 #clock-7 #hand-2, .t-5 #clock-12 #hand-2, .t-5 #clock-15 #hand-2 {
transform: rotate(90deg);
}
.t-5 #clock-6 #hand-1, .t-5 #clock-14 #hand-1, .t-5 #clock-18 #hand-1 {
transform: rotate(270deg);
}
.t-5 #clock-6 #hand-2, .t-5 #clock-14 #hand-2, .t-5 #clock-18 #hand-2 {
transform: rotate(180deg);
}
.t-6 #clock-1 #hand-1, .t-6 #clock-5 #hand-1 {
transform: rotate(0deg);
}
.t-6 #clock-1 #hand-2, .t-6 #clock-5 #hand-2 {
transform: rotate(90deg);
}
.t-6 #clock-3 #hand-1, .t-6 #clock-9 #hand-1 {
transform: rotate(180deg);
}
.t-6 #clock-3 #hand-2, .t-6 #clock-9 #hand-2 {
transform: rotate(90deg);
}
.t-6 #clock-8 #hand-1, .t-6 #clock-16 #hand-1 {
transform: rotate(270deg);
}
.t-6 #clock-8 #hand-2, .t-6 #clock-16 #hand-2 {
transform: rotate(0deg);
}
.t-6 #clock-6 #hand-1, .t-6 #clock-18 #hand-1 {
transform: rotate(270deg);
}
.t-6 #clock-6 #hand-2, .t-6 #clock-18 #hand-2 {
transform: rotate(180deg);
}
.t-6 #clock-2 #hand-1, .t-6 #clock-17 #hand-1 {
transform: rotate(0deg);
}
.t-6 #clock-2 #hand-2, .t-6 #clock-17 #hand-2 {
transform: rotate(180deg);
}
.t-6 #clock-4 #hand-1, .t-6 #clock-7 #hand-1, .t-6 #clock-10 #hand-1, .t-6 #clock-12 #hand-1, .t-6 #clock-13 #hand-1, .t-6 #clock-15 #hand-1 {
transform: rotate(270deg);
}
.t-6 #clock-4 #hand-2, .t-6 #clock-7 #hand-2, .t-6 #clock-10 #hand-2, .t-6 #clock-12 #hand-2, .t-6 #clock-13 #hand-2, .t-6 #clock-15 #hand-2 {
transform: rotate(90deg);
}
.t-6 #clock-11 #hand-1 {
transform: rotate(60deg);
}
.t-6 #clock-11 #hand-2 {
transform: rotate(120deg);
}
.t-6 #clock-14 #hand-1 {
transform: rotate(240deg);
}
.t-6 #clock-14 #hand-2 {
transform: rotate(300deg);
}
.t-7 #clock-1 #hand-1 {
transform: rotate(0deg);
}
.t-7 #clock-1 #hand-2 {
transform: rotate(90deg);
}
.t-7 #clock-2 #hand-1 {
transform: rotate(0deg);
}
.t-7 #clock-2 #hand-2 {
transform: rotate(180deg);
}
.t-7 #clock-3 #hand-1, .t-7 #clock-5 #hand-1 {
transform: rotate(180deg);
}
.t-7 #clock-3 #hand-2, .t-7 #clock-5 #hand-2 {
transform: rotate(90deg);
}
.t-7 #clock-6 #hand-1, .t-7 #clock-8 #hand-1, .t-7 #clock-9 #hand-1, .t-7 #clock-11 #hand-1, .t-7 #clock-12 #hand-1, .t-7 #clock-14 #hand-1, .t-7 #clock-15 #hand-1 {
transform: rotate(270deg);
}
.t-7 #clock-6 #hand-2, .t-7 #clock-8 #hand-2, .t-7 #clock-9 #hand-2, .t-7 #clock-11 #hand-2, .t-7 #clock-12 #hand-2, .t-7 #clock-14 #hand-2, .t-7 #clock-15 #hand-2 {
transform: rotate(90deg);
}
.t-7 #clock-4 #hand-1, .t-7 #clock-17 #hand-1 {
transform: rotate(270deg);
}
.t-7 #clock-4 #hand-2, .t-7 #clock-17 #hand-2 {
transform: rotate(0deg);
}
.t-7 #clock-18 #hand-1 {
transform: rotate(270deg);
}
.t-7 #clock-18 #hand-2 {
transform: rotate(180deg);
}
.t-8 #clock-1 #hand-1 {
transform: rotate(0deg);
}
.t-8 #clock-1 #hand-2 {
transform: rotate(90deg);
}
.t-8 #clock-3 #hand-1 {
transform: rotate(180deg);
}
.t-8 #clock-3 #hand-2 {
transform: rotate(90deg);
}
.t-8 #clock-16 #hand-1 {
transform: rotate(270deg);
}
.t-8 #clock-16 #hand-2 {
transform: rotate(0deg);
}
.t-8 #clock-18 #hand-1 {
transform: rotate(270deg);
}
.t-8 #clock-18 #hand-2 {
transform: rotate(180deg);
}
.t-8 #clock-2 #hand-1, .t-8 #clock-17 #hand-1 {
transform: rotate(0deg);
}
.t-8 #clock-2 #hand-2, .t-8 #clock-17 #hand-2 {
transform: rotate(180deg);
}
.t-8 #clock-4 #hand-1, .t-8 #clock-6 #hand-1, .t-8 #clock-7 #hand-1, .t-8 #clock-9 #hand-1, .t-8 #clock-10 #hand-1, .t-8 #clock-12 #hand-1, .t-8 #clock-13 #hand-1, .t-8 #clock-15 #hand-1 {
transform: rotate(270deg);
}
.t-8 #clock-4 #hand-2, .t-8 #clock-6 #hand-2, .t-8 #clock-7 #hand-2, .t-8 #clock-9 #hand-2, .t-8 #clock-10 #hand-2, .t-8 #clock-12 #hand-2, .t-8 #clock-13 #hand-2, .t-8 #clock-15 #hand-2 {
transform: rotate(90deg);
}
.t-8 #clock-5 #hand-1, .t-8 #clock-11 #hand-1 {
transform: rotate(60deg);
}
.t-8 #clock-5 #hand-2, .t-8 #clock-11 #hand-2 {
transform: rotate(120deg);
}
.t-8 #clock-8 #hand-1, .t-8 #clock-14 #hand-1 {
transform: rotate(240deg);
}
.t-8 #clock-8 #hand-2, .t-8 #clock-14 #hand-2 {
transform: rotate(300deg);
}
.t-9 #clock-1 #hand-1 {
transform: rotate(0deg);
}
.t-9 #clock-1 #hand-2 {
transform: rotate(90deg);
}
.t-9 #clock-3 #hand-1, .t-9 #clock-11 #hand-1 {
transform: rotate(180deg);
}
.t-9 #clock-3 #hand-2, .t-9 #clock-11 #hand-2 {
transform: rotate(90deg);
}
.t-9 #clock-10 #hand-1, .t-9 #clock-17 #hand-1 {
transform: rotate(270deg);
}
.t-9 #clock-10 #hand-2, .t-9 #clock-17 #hand-2 {
transform: rotate(0deg);
}
.t-9 #clock-18 #hand-1 {
transform: rotate(270deg);
}
.t-9 #clock-18 #hand-2 {
transform: rotate(180deg);
}
.t-9 #clock-2 #hand-1 {
transform: rotate(0deg);
}
.t-9 #clock-2 #hand-2 {
transform: rotate(180deg);
}
.t-9 #clock-4 #hand-1, .t-9 #clock-6 #hand-1, .t-9 #clock-7 #hand-1, .t-9 #clock-9 #hand-1, .t-9 #clock-12 #hand-1, .t-9 #clock-14 #hand-1, .t-9 #clock-15 #hand-1 {
transform: rotate(270deg);
}
.t-9 #clock-4 #hand-2, .t-9 #clock-6 #hand-2, .t-9 #clock-7 #hand-2, .t-9 #clock-9 #hand-2, .t-9 #clock-12 #hand-2, .t-9 #clock-14 #hand-2, .t-9 #clock-15 #hand-2 {
transform: rotate(90deg);
}
.t-9 #clock-5 #hand-1 {
transform: rotate(60deg);
}
.t-9 #clock-5 #hand-2 {
transform: rotate(120deg);
}
.t-9 #clock-8 #hand-1 {
transform: rotate(240deg);
}
.t-9 #clock-8 #hand-2 {
transform: rotate(300deg);
}
.t-0 #clock-1 #hand-1 {
transform: rotate(0deg);
}
.t-0 #clock-1 #hand-2 {
transform: rotate(90deg);
}
.t-0 #clock-3 #hand-1 {
transform: rotate(180deg);
}
.t-0 #clock-3 #hand-2 {
transform: rotate(90deg);
}
.t-0 #clock-16 #hand-1 {
transform: rotate(270deg);
}
.t-0 #clock-16 #hand-2 {
transform: rotate(0deg);
}
.t-0 #clock-18 #hand-1 {
transform: rotate(270deg);
}
.t-0 #clock-18 #hand-2 {
transform: rotate(180deg);
}
.t-0 #clock-2 #hand-1, .t-0 #clock-17 #hand-1 {
transform: rotate(0deg);
}
.t-0 #clock-2 #hand-2, .t-0 #clock-17 #hand-2 {
transform: rotate(180deg);
}
.t-0 #clock-4 #hand-1, .t-0 #clock-6 #hand-1, .t-0 #clock-7 #hand-1, .t-0 #clock-8 #hand-1, .t-0 #clock-9 #hand-1, .t-0 #clock-10 #hand-1, .t-0 #clock-12 #hand-1, .t-0 #clock-13 #hand-1, .t-0 #clock-11 #hand-1, .t-0 #clock-15 #hand-1 {
transform: rotate(270deg);
}
.t-0 #clock-4 #hand-2, .t-0 #clock-6 #hand-2, .t-0 #clock-7 #hand-2, .t-0 #clock-8 #hand-2, .t-0 #clock-9 #hand-2, .t-0 #clock-10 #hand-2, .t-0 #clock-12 #hand-2, .t-0 #clock-13 #hand-2, .t-0 #clock-11 #hand-2, .t-0 #clock-15 #hand-2 {
transform: rotate(90deg);
}
.t-0 #clock-5 #hand-1 {
transform: rotate(60deg);
}
.t-0 #clock-5 #hand-2 {
transform: rotate(120deg);
}
.t-0 #clock-14 #hand-1 {
transform: rotate(240deg);
}
.t-0 #clock-14 #hand-2 {
transform: rotate(300deg);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="hours">
<div class="digit">
<div class="clock" id="clock-1">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-2">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-3">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-4">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-5">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-6">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-7">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-8">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-9">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-10">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-11">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-12">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-13">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-14">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-15">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-16">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-17">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-18">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
</div>
<div class="digit">
<div class="clock" id="clock-1">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-2">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-3">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-4">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-5">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-6">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-7">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-8">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-9">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-10">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-11">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-12">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-13">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-14">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-15">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-16">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-17">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-18">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
</div>
</div>
<div class="sep">
<div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div>
<div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div>
<div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div>
<div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div>
<div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div>
<div class="clock"><span id="hand-1"></span><span id="hand-2"></span></div>
</div>
<div class="minutes">
<div class="digit">
<div class="clock" id="clock-1">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-2">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-3">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-4">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-5">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-6">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-7">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-8">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-9">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-10">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-11">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-12">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-13">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-14">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-15">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-16">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-17">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-18">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
</div>
<div class="digit">
<div class="clock" id="clock-1">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-2">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-3">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-4">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-5">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-6">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-7">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-8">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-9">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-10">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-11">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-12">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-13">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-14">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-15">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-16">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-17">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
<div class="clock" id="clock-18">
<span id="hand-1"></span>
<span id="hand-2"></span></div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
var currentDate,
currentHours,
currentMinutes,
currentSeconds,
hours = [],
minutes = [],
seconds = [];
function updateDate() {
currentDate = new Date();
currentHours = currentDate.getHours();
if (currentHours < 10) {
currentHours = '0' + currentHours;
}
currentMinutes = currentDate.getMinutes();
if (currentMinutes < 10) {
currentMinutes = '0' + currentMinutes;
}
currentSeconds = currentDate.getSeconds();
if (currentSeconds < 10) {
currentSeconds = '0' + currentSeconds;
}
}
function splitDigits(stringVal, array) {
var tempString = stringVal.toString();
array.length = 0;
for (var i = 0; i < tempString.length; i++) {
array.push(+tempString.charAt(i));
}
}
function printClass(value, elem) {
elem.attr('class', 'digit').addClass('t-' + value);
}
$(document).ready(function () {
setInterval(function () {
updateDate();
splitDigits(currentSeconds, seconds);
splitDigits(currentMinutes, minutes);
splitDigits(currentHours, hours);
printClass(hours[0], $('.hours .digit:first-of-type'));
printClass(hours[1], $('.hours .digit:last-of-type'));
printClass(minutes[0], $('.minutes .digit:first-of-type'));
printClass(minutes[1], $('.minutes .digit:last-of-type'));
}, 1000);
});
</script>
</body>
</html>10. By Emily Hayman
Made by Emily Hayman. CSS & JavaScript Variable-Powered Clock. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
<style>
.clock-day:before {
content: var(--timer-day);
}
.clock-hours:before {
content: var(--timer-hours);
}
.clock-minutes:before {
content: var(--timer-minutes);
}
.clock-seconds:before {
content: var(--timer-seconds);
}
body {
background: linear-gradient(45deg, #1870ed 0, #f18f88 100%);
font-family: "Montserrat", "sans-serif";
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.clock-container {
margin-top: 30px;
margin-bottom: 30px;
background-color: #080808;
border-radius: 5px;
padding: 60px 20px;
box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.15), 0 15px 90px 30px rgba(0, 0, 0, 0.25);
display: flex;
}
.clock-col {
text-align: center;
margin-right: 40px;
margin-left: 40px;
min-width: 90px;
position: relative;
}
.clock-col:not(:last-child):before, .clock-col:not(:last-child):after {
content: "";
background-color: rgba(255, 255, 255, 0.3);
height: 5px;
width: 5px;
border-radius: 50%;
display: block;
position: absolute;
right: -42px;
}
.clock-col:not(:last-child):before {
top: 35%;
}
.clock-col:not(:last-child):after {
top: 50%;
}
.clock-timer:before {
color: #fff;
font-size: 4.2rem;
text-transform: uppercase;
}
.clock-label {
color: rgba(255, 255, 255, 0.35);
text-transform: uppercase;
font-size: 0.7rem;
margin-top: 10px;
}
@media (max-width: 825px) {
.clock-container {
flex-direction: column;
padding-top: 40px;
padding-bottom: 40px;
}
.clock-col + .clock-col {
margin-top: 20px;
}
.clock-col:before, .clock-col:after {
display: none !important;
}
}
</style>
</head>
<body>
<div class="clock-container">
<div class="clock-col">
<p class="clock-day clock-timer">
</p>
<p class="clock-label">
Day
</p>
</div>
<div class="clock-col">
<p class="clock-hours clock-timer">
</p>
<p class="clock-label">
Hours
</p>
</div>
<div class="clock-col">
<p class="clock-minutes clock-timer">
</p>
<p class="clock-label">
Minutes
</p>
</div>
<div class="clock-col">
<p class="clock-seconds clock-timer">
</p>
<p class="clock-label">
Seconds
</p>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', () =>
requestAnimationFrame(updateTime));
function updateTime() {
document.documentElement.style.setProperty('--timer-day', "'" + moment().format("dd") + "'");
document.documentElement.style.setProperty('--timer-hours', "'" + moment().format("k") + "'");
document.documentElement.style.setProperty('--timer-minutes', "'" + moment().format("mm") + "'");
document.documentElement.style.setProperty('--timer-seconds', "'" + moment().format("ss") + "'");
requestAnimationFrame(updateTime);
}
</script>
</body>
</html>11. By Gabriele Corti
Made by Gabriele Corti. Clock that can be controlled using buttons. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Barlow|Barlow+Condensed&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* position the svg and div wrapping the controls one atop the other */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #262728;
font-family: "Barlow", sans-serif;
}
/* have the clock describing the svg expand to cover a sizeable portion of the viewport */
svg {
margin-top: 1rem;
width: 60vmin;
height: auto;
filter: url(#shadow-large);
}
svg text {
font-family: "Barlow Condensed", sans-serif;
}
/* display the controls side by side */
.controls {
display: flex;
flex-wrap: wrap;
margin-top: 2rem;
}
/* display the button+span elements in columns */
.controls div {
text-align: center;
display: flex;
flex-direction: column;
margin: 1rem;
}
/* style the buttons with the same colors used for the clock */
.controls div button {
border: none;
border-radius: 50%;
background: #ea3f3f;
padding: 0.25rem;
color: #fff;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
filter: url(#shadow-large);
margin: 0.5rem 0;
}
.controls div span {
color: #fff;
}
</style>
</head>
<body>
<!-- svg making up the clock -->
<svg viewBox="0 0 100 100" width="100" height="100">
<defs>
<!-- filters describing the shadows, applied on the larger and smaller shapes -->
<filter id="shadow-large">
<feDropShadow dx="0" dy="0" stdDeviation="4"/>
</filter>
<filter id="shadow-small">
<feDropShadow dx="0" dy="0" stdDeviation="0.2"/>
</filter>
<!-- mask used to cut out a sliver of the overlaid circle -->
<mask
id="mask">
<g transform="translate(50 50)">
<!-- starting at -15, incrementing by 30 for each hour -->
<g
class="hours" transform="rotate(-15)">
<circle
cx="0"
cy="0"
r="50"
fill="#fff">
</circle>
<path
d="M 0 -50 v 50 l 28.86 -50"
fill="#000">
</path>
</g>
</g>
</mask>
</defs>
<!-- circle making up the bottom of the clock -->
<circle
cx="50"
cy="50"
r="46"
fill="#303335">
</circle>
<!-- circle with the accent color, overlaid before the text elements -->
<circle
cx="50"
cy="50"
r="42"
fill="#EA3F3F"
filter="url(#shadow-large)">
</circle>
<!-- text elements, positioned from the center around the clock -->
<g
class="clock--face"
font-size="8px"
transform="translate(50 50)"
text-anchor="middle"
dominant-baseline="middle">
<!-- the elements are included through the script, at intervals of 30 degrees -->
<!--
<text
transform="rotate(-90) translate(35 0) rotate(90)" >
12
</text>
<text
transform="rotate(-0) translate(35 0) rotate(0)" >
03
</text>
-->
</g>
<!-- circle overlaid on the accent circle and text elements -->
<circle
mask="url(#mask)"
cx="50"
cy="50"
r="50"
fill="#303335">
</circle>
<!-- smaller circle on which the hands sit -->
<circle
cx="50"
cy="50"
r="4"
filter="url(#shadow-small)"
fill="#303335">
</circle>
<!-- clock's hands -->
<!-- centered in the clock and rotated according to the passage of time in the 0-360 range -->
<g
class="hands"
transform="translate(50 50)"
>
<g
class="minutes"
transform="rotate(240)"> <!-- change rotation of this group to affect both clock's hand -->
<path
fill="#fff"
d="M -0.4 8 h 0.8 v -33 h -0.8 z">
</path>
<circle
fill="#303335"
cx="0"
cy="0"
r="0.6">
</circle>
</g>
<g
class="seconds"
transform="rotate(80)"> <!-- change rotation of this group to affect both clock's hand -->
<path
fill="#EA3F3F"
d="M -0.4 10 h 0.8 v -45 h -0.8 z">
</path>
<circle
stroke-width="0.4"
stroke="#EA3F3F"
fill="#303335"
cx="0"
cy="0"
r="0.8">
</circle>
</g>
</g>
</svg>
<!-- div wrapping the controls to change the number of hours/minutes/seconds -->
<div class="controls">
<div class="controls__control" data-control="hours">
<button>+</button>
<span class="control--hours">h</span>
<button>-</button>
</div>
<div class="controls__control" data-control="minutes">
<button>+</button>
<span class="control--minutes">m</span>
<button>-</button>
</div>
<div class="controls__control" data-control="seconds">
<button>+</button>
<span class="control--seconds">s</span>
<button>-</button>
</div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>
<script>
/* script purpose
1. include the 12 numbers in the clock, around the SVG circle
1. rotate the hands of the clock as well as the mask to show the current time in the svg
1. include the current time in the span describing the controls
1. react to a click on the buttons to update the time on the clock and on the buttons also
*/
// utility functions
// function returning the input number as a string _and_ adding a 0 to numbers smaller than 10
const zeroPadded = number => number >= 10 ? number.toString() : `0${number}`;
// function taking as input an hour value in the [0-23] range and returning the 12 hours format
const twelveClock = twentyFourClock => {
if (twentyFourClock === 0) {
return 12;
}if (twentyFourClock > 12) {
return twentyFourClock - 12;
}
return twentyFourClock;
};
// 1. SVG clock face
const clockFace = document.querySelector('svg g.clock--face');
// add the twelve numbers by rotating, translating and then rotating back text elements
// ! add a zero to the numbers smaller than 10 through the utility function
for (let i = 0; i < 12; i += 1) {if (window.CP.shouldStopExecution(0)) break;
clockFace.innerHTML += `
<text
transform="rotate(${-90 + 30 * (i + 1)}) translate(34 0) rotate(${90 - 30 * (i + 1)})" >
${zeroPadded(i + 1)}
</text>
`;
}
// SVG & BUTTONS current time
// retrieve the current number of hours, minutes and seconds
window.CP.exitedLoop(0);const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// as hours in the 0-23 range, normalize the values in the 1-12 range
const time = {
hours: twelveClock(hours), // 1-12
minutes, // 0-59
seconds // 0-59
};
// create another object describing the time's value, for the rotation of the hands
// this to avoid the glitch occurring when the time goes back to 0 (or back to 1 for the hours)
const rotation = {
hours: twelveClock(hours),
minutes,
seconds };
// use the values to update the svg and the text of the span elements
const entries = Object.entries(time);
entries.forEach(([key, value]) => {
anime({
targets: `g.${key}`,
transform: key === 'hours' ? `rotate(${-15 + value * 30})` : `rotate(${value * 6})`,
duration: 2000 });
const span = document.querySelector(`span.control--${key}`);
span.textContent = zeroPadded(value);
});
// BUTTONS click event
const buttons = document.querySelectorAll('button');
// function returning new values for the time and rotation object, according to the input instructions
function updateValues(instructions) {
/* destructure the necessary information
key: hours, minutes or seconds
operation: + or -
timeValue: number in the [1-12] or [0-59] range
rotationValue: number
*/
const { key, operation } = instructions;
const { timeValue, rotationValue } = instructions;
// create a number of degrees based on the previous value and the current operation
const degrees = operation === '+' ? rotationValue + 1 : rotationValue - 1;
// create a number of hours/minutes/seconds on the basis of the operation
let value = operation === '+' ? timeValue + 1 : timeValue - 1;
// format the value to fall in the prescribed range
if (key === 'hours') {
value = value > 12 ? 1 : value === 0 ? 12 : value;
} else {
value = value > 59 ? 0 : value < 0 ? 59 : value;
}
// return the updated time and rotation value
return { value, degrees };
}
// function called when a click is registered on the button elements
function handleClick() {
// retrieve the necessary information from the wrapping container and the current element
const key = this.parentElement.getAttribute('data-control');
const operation = this.textContent;
// retrieve the previous values
const timeValue = time[key];
const rotationValue = rotation[key];
// based on the set instruction call the function updating the time and rotation values
const instructions = {
key,
operation,
timeValue,
rotationValue };
const { value, degrees } = updateValues(instructions);
// update the objects
time[key] = value;
rotation[key] = degrees;
// update the position of the matching hand
anime({
targets: `g.${key}`,
transform: key === 'hours' ? `rotate(${-15 + degrees * 30})` : `rotate(${degrees * 6})`,
duration: 400,
// remove the event listeners from the input buttons until the animation is complete
begin: () => buttons.forEach(button => button.removeEventListener('click', handleClick)),
complete: () => buttons.forEach(button => button.addEventListener('click', handleClick)) });
// update the text of the matching span
const span = document.querySelector(`span.control--${key}`);
span.textContent = zeroPadded(value);
}
buttons.forEach(button => button.addEventListener('click', handleClick));
//# sourceURL=pen.js
</script>
</body>
</html>12. By Vedant
Made by Vedant. A cool looking analog JavaScript clock that has hour, minute and second hand. ( Source )
<!doctype html>
<html>
<head>
<title>beautiful Clock</title>
<link rel="stylesheet" href="NC.css">
<script src="NC.js"></script>
</head>
<body style="background-color: rgb(0, 0, 0);">
<div class="container">
<img src="https://i.pinimg.com/originals/95/50/ef/9550effeaaaafc9cee78b52faa03a1b3.gif" id="image">
<div id="hour"></div>
<div id="mins"></div>
<div id="secs"></div>
</div>
</body>
</html>
-------CSS-------
.container{
position: absolute;
height: 150pt;
width: 150pt;
margin: auto;display: flex;
top: 0;right: 0;left: 0;bottom: 0;
justify-content: center;
align-items: center;
}
#image{
border-radius: 50%;
height: 280pt;
}
#hour,#mins,#secs{
position: absolute;
height: 50pt;
width:2px;
transform-origin: bottom;
background-color: white;
border-radius:10px 10px 0 0;
}
#hour{
height: 45px;
top: 30%;
transform: rotate(90deg);
background: -webkit-linear-gradient(rgb(255, 0, 136), rgb(255, 174, 0));
transition:1s;
}
#mins{
background: -webkit-linear-gradient(rgb(0, 162, 255), rgb(0, 255, 170));
top: 19%;
transform: rotate(-45deg);
transition:1s;
}
#secs{
background: -webkit-linear-gradient(rgb(255, 238, 0), rgb(123, 255, 0));
height: 55pt;
top: 15.5%;
}
--------JS--------
function setDeg(){
var hours = ( new Date().getHours() + new Date().getMinutes()/60) / 12 * 360;
var mins = new Date().getMinutes() / 60 * 360;
var secs = ( new Date().getSeconds() + new Date().getMilliseconds()/1000) /60 * 360;
document.getElementById('hour').style.transform = 'rotate('+hours+'deg)';
document.getElementById('mins').style.transform = 'rotate('+mins+'deg)';
document.getElementById('secs').style.transform = 'rotate('+secs+'deg)';
}
setInterval(setDeg,1);13. By Sololearn
Made by Sololearn. Analog clock with simple animation. ( Source )
<!DOCTYPE html>
<html>
<body onload="start()">
<canvas id="canvas" width="250px" height="250px"></canvas>
</body>
</html>
-----JS-----
var ctx;
var date;
var size = 80;
function start()
{
var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
showTime();
//call the function every second
setInterval(showTime, 1000);
}
function showTime()
{
//clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//get the date
date = new Date();
//draw the clock
drawClock();
//show the time
showSeconds();
showMinutes();
showHours();
}
function drawClock()
{
//draw the frame
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, size + 7, 0, Math.PI * 2);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.strokeStyle = '#3b3b3b';
ctx.lineWidth = 10;
ctx.stroke();
//draw the hour marks
for (var i = 0; i < 12; i++) {
var angle = (i - 3) * (Math.PI * 2) / 12;
ctx.lineWidth = 2;
ctx.beginPath();
var x1 = (canvas.width / 2) + Math.cos(angle) * (size);
var y1 = (canvas.height / 2) + Math.sin(angle) * (size);
var x2 = (canvas.width / 2) + Math.cos(angle) * (size - (size / 7));
var y2 = (canvas.height / 2) + Math.sin(angle) * (size - (size / 7));
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#000';
ctx.stroke();
}
//draw the second marks
for (i = 0; i < 60; i++) {
angle = (i - 3) * (Math.PI * 2) / 60;
ctx.lineWidth = 1;
ctx.beginPath();
x1 = (canvas.width / 2) + Math.cos(angle) * (size);
y1 = (canvas.height / 2) + Math.sin(angle) * (size);
x2 = (canvas.width / 2) + Math.cos(angle) * (size - (size / 30));
y2 = (canvas.height / 2) + Math.sin(angle) * (size - (size / 30));
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#000';
ctx.stroke();
}
}
function showSeconds()
{
var sec = date.getSeconds();
var angle = ((Math.PI * 2) * (sec / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * size), canvas.height / 2 + Math.sin(angle) * size);
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo((canvas.width / 2 - Math.cos(angle) * 20), canvas.height / 2 - Math.sin(angle) * 20);
ctx.strokeStyle = '#e10600';
ctx.stroke();
}
function showMinutes()
{
var min = date.getMinutes();
var angle = ((Math.PI * 2) * (min / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * size / 1.1),
canvas.height / 2 + Math.sin(angle) * size / 1.1);
ctx.strokeStyle = '#000';
ctx.stroke();
}
function showHours()
{
var hour = date.getHours();
var min = date.getMinutes();
var angle = ((Math.PI * 2) * ((hour * 5 + (min / 60) * 5) / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * size / 1.5),
canvas.height / 2 + Math.sin(angle) * size / 1.5);
ctx.strokeStyle = '#000';
ctx.stroke();
}
------CSS------
#canvas
{
background-color:#e0e0e0;
}14. By Kamil
Made by Kamil. The clock displays the current day, date and the time. It uses minimalistic styling. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Digital clock pro</title>
</head>
<body id="body">
<form id="all">
<div id="test">loading</div>
<div id="ttt"></div>
</form>
<p id="text">Made by Kamil</p>
</body>
</html>
------CSS------
#body{
background-color:grey;
}
#test{
text-align:center;
font-family:serif;
color:white;
letter-spacing:2px;
font-size:70px;
text-shadow:5px 3px 25px white;
padding:5px;
border:2px lightskyblue;
border-radius:30px;
}
#text{
text-align:center;
color:white;
letter-spacing:3px;
}
#text2{
margin-top:10%;
text-align:center;
font-family:Arial;
color:white;
letter-spacing:3px;
word-spacing:4px;
text-shadow:5px 3px 20px lightskyblue;
}
#b1{
text-align:center;
font-weight:bold;
}
#ttt{
color:white;
text-align:center;
padding:5px;
border:2px lightskyblue;
font-family:serif;
border-radius:30px;
}
#all{
padding:5px;
border:5px solid lightskyblue;
font-family:serif;
border-radius:30px;
}
------JS------
window.onload = function(){
printTime();
};
function printTime() {
var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
var day = d.getDay();
var date = d.getDate();
var month = d.getMonth();
var year = d.getFullYear();
switch (day){
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
}
if(hours<10){
hours = "0" + hours;
}
if(mins<10){
mins = "0" + mins;
}
if(secs<10){
secs = "0" + secs;
}
month = month + 1; document.getElementById("test").innerHTML = hours+":"+mins+":"+secs;
document.getElementById("ttt").innerHTML = day + ", " + date + "." + month + "." + year;
}
setInterval(printTime, 1000);15. By good_bits
Made by good_bits. Analog clock that also has a dark mode that you can enable by clicking on the button. ( Source )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock 2</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body class="light-theme">
<div class="wrapper">
<div class="clock-container">
<div class="clock-body">
<div class="clock-markings">
</div>
<div class="clock-labels">
<div class="clock-label-row big">
<div class="top-label">12</div>
<div class="bottom-label">6</div>
</div>
<div class="clock-label-row">
<div class="top-label">|</div>
<div class="bottom-label">|</div>
</div>
<div class="clock-label-row">
<div class="top-label">|</div>
<div class="bottom-label">|</div>
</div>
<div class="clock-label-row big">
<div class="top-label">3</div>
<div class="bottom-label">9</div>
</div>
<div class="clock-label-row">
<div class="top-label">|</div>
<div class="bottom-label">|</div>
</div>
<div class="clock-label-row">
<div class="top-label">|</div>
<div class="bottom-label">|</div>
</div>
</div>
<div class="clock-hands">
<div class="clock-hour-hand"></div>
<div class="clock-minute-hand"></div>
<div class="clock-second-hand"></div>
</div>
<div class="clock-name-label">
<div class="name">! Quartz</div>
</div>
</div>
</div>
<div class="theme-switch-container">
<div class="theme-switch" id="theme-switch" data-state="light-mode">
<div class="slide-group">
<div class="dark-mode label">Dark</div>
<div class="switch-btn" onclick="switchTheme()">
<div class="moon-icon icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M12 24C5.367 24 0 18.633 0 12 0 5.488 5.152.285 11.477.012a.741.741 0 01.742.515.747.747 0 01-.293.856A8.25 8.25 0 0016.5 16.5a8.178 8.178 0 005.93-2.516.752.752 0 01.898-.136c.293.16.45.496.371.824A12.006 12.006 0 0112 24zM9.098 1.902A10.476 10.476 0 001.5 12c0 5.79 4.71 10.5 10.5 10.5 4.086 0 7.676-2.3 9.41-5.82A9.663 9.663 0 0116.5 18c-5.375 0-9.75-4.375-9.75-9.75a9.73 9.73 0 012.348-6.348zm0 0"/><path d="M19.5 9a.75.75 0 01-.75-.75c0-1.652-1.348-3-3-3a.75.75 0 010-1.5c1.652 0 3-1.348 3-3a.75.75 0 011.5 0c0 1.652 1.348 3 3 3a.75.75 0 010 1.5c-1.652 0-3 1.348-3 3a.75.75 0 01-.75.75zm-1.266-4.5c.5.332.934.766 1.266 1.266A4.54 4.54 0 0120.766 4.5 4.54 4.54 0 0119.5 3.234 4.54 4.54 0 0118.234 4.5zm0 0M14.25 14.672a.75.75 0 01-.75-.75c0-1.035-.84-1.875-1.875-1.875a.75.75 0 010-1.5c1.035 0 1.875-.84 1.875-1.875a.75.75 0 011.5 0c0 1.035.84 1.875 1.875 1.875a.75.75 0 010 1.5c-1.035 0-1.875.84-1.875 1.875a.75.75 0 01-.75.75zm-.508-3.375c.188.148.36.32.508.508.148-.188.32-.36.508-.508a3.122 3.122 0 01-.508-.508c-.148.188-.32.36-.508.508zm0 0"/></svg>
</div>
<div class="sun-icon icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M16.254 7.746A6.052 6.052 0 0012 5.97a5.923 5.923 0 00-4.254 1.777A6.052 6.052 0 005.97 12c0 1.652.699 3.176 1.777 4.254A6.052 6.052 0 0012 18.03a5.923 5.923 0 004.254-1.777A6.052 6.052 0 0018.03 12a5.923 5.923 0 00-1.777-4.254zm-1.145 7.363A4.374 4.374 0 0112 16.383a4.374 4.374 0 01-3.11-1.274A4.374 4.374 0 017.618 12c0-1.207.477-2.316 1.274-3.11A4.374 4.374 0 0112 7.618c1.207 0 2.316.477 3.11 1.274A4.374 4.374 0 0116.382 12a4.374 4.374 0 01-1.274 3.11zm0 0M23.176 11.176H20.73a.837.837 0 00-.824.824c0 .445.38.824.824.824h2.446A.84.84 0 0024 12a.84.84 0 00-.824-.824zm0 0M12 19.906a.837.837 0 00-.824.824v2.446A.84.84 0 0012 24a.84.84 0 00.824-.824V20.73a.837.837 0 00-.824-.824zm0 0M20.477 19.332l-1.747-1.746c-.285-.316-.824-.316-1.144 0a.809.809 0 000 1.144l1.746 1.747a.809.809 0 101.145-1.145zm0 0M12 0a.84.84 0 00-.824.824V3.27c0 .445.379.824.824.824a.837.837 0 00.824-.824V.824A.84.84 0 0012 0zm0 0M20.508 3.523a.809.809 0 00-1.145 0L17.617 5.27a.809.809 0 000 1.144c.29.316.828.316 1.145 0l1.746-1.746a.809.809 0 000-1.145zm0 0M3.27 11.176H.824A.84.84 0 000 12c0 .445.348.824.824.824H3.27A.837.837 0 004.094 12a.837.837 0 00-.824-.824zm0 0M6.383 17.586c-.29-.316-.828-.316-1.145 0l-1.746 1.746a.809.809 0 101.145 1.145l1.746-1.747a.809.809 0 000-1.144zm0 0M6.383 5.27L4.637 3.523a.809.809 0 10-1.145 1.145l1.746 1.746A.809.809 0 106.383 5.27zm0 0"/></svg>
</div>
</div>
<div class="light-mode label">Light</div>
</div>
</div>
</div>
</div>
</body>
</html>
------CSS-------
* {
padding: 0 ;
margin: 0 ;
box-sizing: border-box ;
outline: none ;
user-select: none ;
}
html {
font-family: sans-serif ;
-webkit-tap-highlight-color:#00000000;
}
.light-theme {
--background : #FFDC89 ;
--clock-body-color : #ffffff ;
--on-clock-body-color : #5eaaa8 ;
--clock-labels-color : #5eaaa8 ;
--big-clock-labels-color : #056676 ;
--hour-hand-color: #91d18b ;
--minute-hand-color: #ffbd69 ;
--second-hand-color: #ED6D79 ;
}
.dark-theme {
--background : #1b262cf5 ;
--clock-body-color : #1b262c;
--on-clock-body-color : #00bcd4 ;
--clock-labels-color : #5eaaa8 ;
--big-clock-labels-color : #056676 ;
--hour-hand-color: #91d18b ;
--minute-hand-color: #ffbd69 ;
--second-hand-color: #e11d74 ;
}
.wrapper {
position: absolute ;
width : 100vw ;
height: 100vh ;
top : 0 ;
left: 0 ;
display: flex ;
align-items: center ;
justify-content: center ;
flex-direction: column ;
background-color: var(--background) ;
}
.clock-container {
--clock-size : 80vmin ;
position: relative ;
width : var(--clock-size);
height: var(--clock-size) ;
}
.clock-container .clock-body {
--label-margin :1.5rem;
position: relative ;
width : 100% ;
height: 100% ;
border-radius: 50% ;
background-color: var(--clock-body-color) ;
transition: background-color 200ms ease-out ;
box-shadow: 0 4px 12px rgba(0,0,0,.05) , 0 2px 4px rgba(0,0,0,.1);
}
.clock-container .clock-body::before {
position: absolute ;
top : 50% ;
left: 50% ;
width : 90% ;
height: 90% ;
border-radius: 50% ;
border:2px solid var(--on-clock-body-color);
transform: translate(-50%,-50%);
content: "" ;
}
.clock-container .clock-body .clock-labels {
position: absolute ;
width : 100% ;
height: 100% ;
color: var(--clock-labels-color);
}
.clock-container .clock-body .clock-labels .clock-label-row {
--label-angle : 90deg ;
position: absolute ;
top : 50% ;
left: 50% ;
height: 100% ;
width: 4ch ;
font-size: 1rem ;
line-height: 1rem ;
display: flex ;
flex-direction: column ;
align-items: center ;
justify-content: space-between ;
padding: var(--label-margin) 0 ;
transform: translate(-50%,-50%) rotate(var(--label-angle));
}
.clock-container .clock-body .clock-labels .big .top-label ,
.clock-container .clock-body .clock-labels .big .bottom-label {
transform: rotate(calc(var(--label-angle) * -1)) ;
font-size: 1.25rem ;
font-weight: 500 ;
}
.clock-container .clock-body .clock-labels .clock-label-row:nth-of-type(1) {
--label-angle:0deg;
}
.clock-container .clock-body .clock-labels .clock-label-row:nth-of-type(2) {
--label-angle:30deg;
}
.clock-container .clock-body .clock-labels .clock-label-row:nth-of-type(3) {
--label-angle:60deg;
}
.clock-container .clock-body .clock-labels .clock-label-row:nth-of-type(4) {
--label-angle:90deg;
}
.clock-container .clock-body .clock-labels .clock-label-row:nth-of-type(5) {
--label-angle:120deg;
}
.clock-container .clock-body .clock-labels .clock-label-row:nth-of-type(6) {
--label-angle:150deg;
}
.clock-container .clock-body .clock-hands {
position: absolute ;
width : 100% ;
height: 100% ;
z-index: 1 ;
}
.clock-container .clock-body .clock-hands::before {
position: absolute ;
top: 50% ;
left: 50% ;
width: 0.5rem ;
height: 0.5rem ;
content: "" ;
border-radius: 50% ;
background-color: var(--clock-body-color);
border: 2px solid var(--second-hand-color);
transition: background-color 200ms ease-out ;
z-index: 1 ;
transform:translate(-50%,-50%);
}
.clock-container .clock-body .clock-hands .clock-second-hand {
--hand-length: calc(42.5% - var(--label-margin)) ;
--hand-timeperiod : 60s ;
--hand-tail-length : 1rem ;
--hand-width:0.15rem;
background-color: var(--second-hand-color) ;
}
.clock-container .clock-body .clock-hands .clock-minute-hand {
--hand-length: calc(37.5% - var(--label-margin)) ;
--hand-timeperiod : 3600s ;
--hand-tail-length : 0.75rem ;
--hand-width:0.25rem;
background-color: var(--minute-hand-color) ;
}
.clock-container .clock-body .clock-hands .clock-hour-hand {
--hand-length: calc(27.5% - var(--label-margin)) ;
--hand-timeperiod : 43200s ;
--hand-tail-length : 0.5rem ;
--hand-width:0.35rem;
background-color: var(--hour-hand-color) ;
}
.clock-container .clock-body .clock-hands .clock-hour-hand ,
.clock-container .clock-body .clock-hands .clock-minute-hand ,
.clock-container .clock-body .clock-hands .clock-second-hand{
position: absolute ;
top : calc(50% - var(--hand-length) + var(--hand-tail-length));
left: calc(50% - var(--hand-width) / 2);
width: var(--hand-width) ;
height: calc(var(--hand-length) + var(--hand-tail-length));
transform-origin: 50% calc(100% - var(--hand-tail-length) * 2) ;
transform: rotate(0deg);
border-radius: calc(var(--hand-width) * 0.5);
animation: clock-hand-motion var(--hand-timeperiod) steps(60) infinite;
}
@keyframes clock-hand-motion {
from{
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.clock-container .clock-body .clock-markings {
position: absolute ;
width: 100% ;
height: 100% ;
}
.clock-container .clock-body .clock-markings .mark {
position: absolute ;
top : 50% ;
left: 50% ;
width : 2ch ;
height: 100% ;
transform: translate(-50%,-50%) rotate(0deg);
}
.clock-container .clock-body .clock-markings .mark::before {
position: absolute ;
top : calc(var(--label-margin)*2.25) ;
left: 50% ;
content: "" ;
width : 0.2rem ;
height: 0.2rem ;
border-radius: 50% ;
background-color: var(--on-clock-body-color);
transform: translate(-50%,-50%);
}
.clock-container .clock-body .clock-name-label {
position: absolute ;
left : 50% ;
bottom: 30% ;
color: var(--clock-labels-color);
font-size: 0.8rem ;
font-weight: 300 ;
letter-spacing: 2px ;
text-align: center ;
opacity: 0.75 ;
transform: translateX(-50%);
}
.theme-switch-container {
position: relative ;
width : 60vmin ;
height: 20vmin ;
margin-top:3rem;
display: flex ;
align-items: center ;
justify-content: center ;
}
.theme-switch-container .theme-switch {
position: relative ;
width : 8rem ;
height: 3rem ;
border-radius: 3rem ;
background-color: var(--clock-body-color);
transition: background-color 200ms ease-out;
overflow: hidden ;
}
.theme-switch-container .theme-switch .slide-group {
position: absolute ;
display: flex ;
transition: transform 200ms ease-out ;
}
.theme-switch-container .theme-switch .slide-group .label {
width : 5rem ;
height: 3rem ;
font-size: 0.8rem ;
font-weight: 500 ;
letter-spacing: 2px ;
color: #454545 ;
display: flex ;
align-items: center ;
justify-content: center ;
}
.theme-switch-container .theme-switch .slide-group .dark-mode {
color: #eee;
}
.theme-switch-container .theme-switch .slide-group .switch-btn {
position: relative ;
width : 2.6rem ;
height: 2.6rem ;
flex: 0 0 2.6rem;
margin: 0.2rem ;
overflow: hidden ;
background-color: #ffffff ;
border-radius: 50% ;
box-shadow: 0 2px 4px rgba(0,0,0,.1);
cursor: pointer ;
}
.theme-switch-container .theme-switch .slide-group .switch-btn .icon{
position: absolute ;
top : 0 ;
left: 0 ;
width : 100% ;
height: 100% ;
display: flex ;
align-items: center ;
justify-content: center ;
transition: opacity 200ms ease-out;
opacity: 0 ;
}
.theme-switch-container .theme-switch .slide-group .switch-btn .icon svg {
width : 50% ;
height: 50% ;
stroke: none ;
fill: #454545 ;
}
.theme-switch-container .theme-switch[data-state="dark-mode"] {
background-color:#1b262c ;
}
.theme-switch-container .theme-switch[data-state="dark-mode"] .slide-group .switch-btn .moon-icon{
opacity: 1 ;
}
.theme-switch-container .theme-switch[data-state="light-mode"] .slide-group .switch-btn .sun-icon{
opacity: 1 ;
}
.theme-switch-container .theme-switch[data-state="light-mode"] {
background-color: #f5f5f5 ;
}
.theme-switch-container .theme-switch[data-state="light-mode"] .slide-group {
transform: translateX(-5rem);
}
-------JS-------
window.onload = () => {
generateClockMarkings();
intializeClockTime();
};
function intializeClockTime(){
let currentTime = new Date() ;
// get current time in seconds
let seconds = currentTime.getSeconds() ;
let minutes = currentTime.getMinutes() ;
let hours = currentTime.getHours() ;
// calculate Offsets based on passed time
let secondHandOffset = seconds;
let minuteHandOffset = minutes * 60 + seconds;
let hourHandOffset = hours * 3600 + minuteHandOffset ;
// Apply offsets to clock hands
let secondHand = document.querySelector(".clock-second-hand") ;
let minuteHand = document.querySelector(".clock-minute-hand") ;
let hourHand = document.querySelector(".clock-hour-hand") ;
secondHand.style.animationDelay = (-secondHandOffset) + "s" ;
minuteHand.style.animationDelay = (-minuteHandOffset) + "s" ;
hourHand.style.animationDelay = (-hourHandOffset) + "s" ;
}
// this function generates markings
function generateClockMarkings() {
let markingContainer = document.querySelector(".clock-markings");
for(var i=0;i<360;i+=6) {
markingContainer.innerHTML += `<div class="mark" style="transform: translate(-50%,-50%) rotate(${i}deg);opacity:${i%30==0?0.75:0.3};"></div>` ;
}
}
let darkModeEnabled = false ;
let bodyElement = null ;
let themeSwitch = null ;
// function to change theme
function switchTheme() {
if(themeSwitch === null)
themeSwitch = document.getElementById("theme-switch");
if(bodyElement === null)
bodyElement = document.querySelector("body") ;
if(darkModeEnabled === true) {
themeSwitch.setAttribute("data-state","light-mode") ;
bodyElement.classList.remove("dark-theme");
bodyElement.classList.remove("light-theme");
bodyElement.classList.add("light-theme");
darkModeEnabled = false ;
} else {
themeSwitch.setAttribute("data-state","dark-mode") ;
bodyElement.classList.remove("dark-theme");
bodyElement.classList.remove("light-theme");
bodyElement.classList.add("dark-theme");
darkModeEnabled = true ;
}
}16. By Basel.Al_hajeri?.MBH()
Made by Basel.Al_hajeri?.MBH(). Digital clock that displays the time and the date, it also have the option to change the clock language which you can change by clicking on the dropdown. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
------JS------
(function(){
window.onload=function(){
var node=document.createElement.bind(document);
var clock=node("div"),parts;
clock.appendChild(node("h1"))
clock.appendChild(node("hr"))
clock.appendChild(node("h3"));
parts=clock.children;
var time;
var htm=document.firstElementChild;
var sel=node("select"),
opts,
opt;
var languages={
"ar-YE":"Arabic",
"en-US":" English",
"be-BE":"Belarusian",
"ca-CA":"Catalan",
"da-DA":"Danish",
"es-ES":"Estonian",
"fil-FIL":"Filipino",
"fin-FIN":"Finnish",
"fr-SW":" French",
"he-HE":"Hebrew",
"hi-CO":"Hindi",
"hu-HU":"Hungarian",
"in-IN":"Indonesian",
"it-SW":"Italian",
"ja-JA":"Javanese",
"lit-LA":"Lithuanian",
"mo-MO":"Mongolian - Romanian",
"pol-POL":"Polish",
"por-POR":"Portuguese",
"ru-RU":"Russian",
"sl-SL":"Slovak",
"spa-SP":"Spanish",
"sw-SW":"Swedish",
"th-TH":"Thai",
"tur-TR":"Turkish",
"uk-UK":"Ukrainian",
"ur-UR":"Urdu",
"vi-VI":"Vietnamese",
"zu-ZU":"Zulu"
};
parts.item(1).width="75%";
for(let i of Object.entries(languages)){
opts=node("option");
opts.value=i[0];
opts.innerHTML=i[1]+i[0].slice(2);
sel.appendChild(opts);
}
htm.setAttribute("lang",sel.options[0].value);
sel.onchange=function(){
opt=sel.options[sel.options.selectedIndex].value;
htm.setAttribute("lang",opt);
}
setInterval(function(){
time=new Date();
parts[0].innerHTML=time.toLocaleTimeString(htm.lang);
parts.item(2).innerHTML=time.toLocaleDateString(htm.lang,{
weekday: "long",
month: "long",
year: "numeric",
day: "numeric",
era: "short"
})
},)
document.body.appendChild(clock) &&
document.body.appendChild(sel);
try {
document.getElementById("style-from-editor").innerHTML=String.raw`
* {
text-align: center;
user-select: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
div {
box-shadow: inset 7px 7px 13px #017,
inset -7px -7px 13px #025,
2px 2px 12px #000,
0 0 2px #000;
border-radius: 40px;
margin: 10vh 0;
text-shadow: 0.5px 0.5px 4px #000;
}
div,select {
background-color: #06f;
color: #eef;
width: 100%; height: 100%;
border: 3.5px none #000;
display: block;
box-sizing: border-box;
padding: 3vh 15px;
}
div > h3 {
color: #dde;
}
select {
font-size: 20px;
outline: none;
box-shadow: inset 4px 4px 8px #039,
inset -4px -4px 8px #039,
1px 1px 4px #000,
0 0 2px #000;
border-radius: 25px;
text-shadow: 0 0 2px #000;
}
select:active {
box-shadow: inset 1px 1px 3px #00f,
inset -1px -1px 3px #00f,
0 0 2px #000;
}
`;
} catch(_) {
throw (function(x){ return x; })("MBHError: This code is type of codes which they are created by Basel Al_hajeri: MBH.\n Please if you would like to use this code let us know ... Thank you ");
}
}
})();17. By Sofi💕
Made by Sofi💕. Analog clock using simple styling. ( Source )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>Javascript Clock Ul Dark</title>
<link rel="stylesheet" href="result.css">
</head>
<body>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
</body>
</html>
------JS------
const deg = 6;
const hr = document.querySelector('#hr'); const min= document.querySelector('#mn'); const sec = document.querySelector('#sc'); setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg; let ss = day.getSeconds() * deg; hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`; mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`; })
------CSS------
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-width: 90vh;
min-height: 100vh;
background-color:#091921;
}
.clock {
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR4OMQPtnPgucDDiQADxUUQowkj5xITZOll5sNWUkZQsbmBeBhS&usqp=CAU);
background-size: cover;
border: 4px solid #091921;
border-radius: 50%;
box-shadow: 0 -15px 15px rgb(255,255,255,0.05), inset 0 -15px 15px rgb(255,255,255,0.05), 0 15px 15px rgb(255,255,255,0.3), inset 0 15px 15px rgb(255,255,255,0.3);
}
.clock:before {
content: '';
position: absolute;
width: 15px;
height: 15px;
background-color: #091921;
border-radius: 50%;
z-index: 10000;
}
.clock .hour,
.clock .min,
.clock .sec {
position: absolute;
}
.clock .hour, .hr {
width: 160px;
height: 160px;
}
.clock .min, .mn {
width: 190px;
height: 190px;
}
.clock .sec, .sc {
width: 230px;
height: 230px;
}
.hr, .mn, .sc {
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.hr:before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background-color: grey;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background-color: #000;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background-color: red;
z-index: 12;
border-radius: 6px 6px 0 0;
}18. By Power’f GOD⚡⚡
Made by Power’f GOD⚡⚡. Analog clock with simple design and cool loading animation, it shows the current time and also shows whether its AM or PM. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Clock</title>
<meta charset="utf-8" />
<meta name="theme-color" content="#222" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<div id="clock-wrapper">
<div id="clock-center"></div>
<div id="clock-second"></div>
<div id="clock-minute"></div>
<div id="clock-hour"></div>
<div id="inner-circle"></div>
<span class="displayed-digits">12</span>
<span class="displayed-digits">3</span>
<span class="displayed-digits">6</span>
<span class="displayed-digits">9</span>
<span id="am-pm">AM</span>
</div>
<div id="my-name"> - #Power'f GOD⚡⚡ </div>
</body>
</html>
------CSS------
html,
body
{
margin: 0;
height: 100%;
width: 100%;
background: #222;
overflow: auto;
text-align: center;
font-family: "Trebuchet MS";
}
*
{ box-sizing: border-box; }
#clock-wrapper
{
width: 320px;
height: 320px;
background: #3058d0;
border-radius: 50%;
position: relative;
margin: 70px auto 70px auto;
border: 10px outset royalblue;
box-shadow: 5px 5px 10px #161616;
}
span,
#clock-center,
#clock-second,
#clock-minute,
#clock-hour,
#inner-circle
{
display: inline-block;
position: absolute;
}
#clock-center
{
height: 15px;
width: 15px;
margin: auto;
background: #ff7af9;
top: 142.5px;
left: 143px;
border-radius: 50%;
z-index: 5;
}
#clock-second
{
width: 1px;
height: 130px;
background: white;
top: 19px;
left: 150px;
z-index: 4;
border-radius: 0.5px;
}
#clock-minute
{
width: 3.5px;
height: 127.5px;
background: #ff7af9;
top: 22px;
left: 149px;
z-index: 3;
border-radius: 1.75px;
}
#clock-hour
{
width: 5.5px;
height: 85px;
background: yellow;
top: 64.5px;
left: 148px;
border-radius: 2.75px;
z-index: 2;
}
#clock-second,
#clock-minute,
#clock-hour
{
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 50% 100%;
-webkit-transition: -webkit-transform 0.75s;
transform: rotate(0deg);
transform-origin: 50% 100%;
transition: transform 0.75s;
}
.digits
{
width: 3px;
height: 18px;
background: yellow;
border-radius: 1.5px;
z-index: 2;
}
.displayed-digits
{
color: gainsboro;
font-weight: bolder;
font-size: 22px;
font-family: Sans;
z-index: 0;
}
span:nth-of-type(1)
{
top: 16px;
left: 138px;
}
span:nth-of-type(2)
{
top: 137px;
right: 20px;
}
span:nth-of-type(3)
{
bottom: 18px;
left: 144px;
}
span:nth-of-type(4)
{
top: 137px;
left: 22px;
}
#inner-circle
{
top: 39px;
left: 40px;
width: 220px;
height: 220px;
border: 2px solid royalblue;
border-radius: 50%;
}
.mini-digits
{
width: 1.5px;
height: 6px;
border-radius: 0.75px;
background: gainsboro;
}
#am-pm
{
left: 130px;
top: 170px;
color: royalblue;
background: darkblue;
padding: 3px 10px;
border-radius: 3px;
z-index: 0;
font-weight: bolder;
font-size: 85%;
letter-spacing: 2px;
}
#my-name
{
display: inline-block;
background: #333;
padding: 7px 13px;
position: relative;
border-radius: 20px;
font-size: 80%;
color: #777;
}
-----JS------
var ID = document.getElementById.bind(document);
this.onload = function()
{
var sec, min, hr, clock, secondHand, minuteHand, hourHand, secDeg, minDeg, hrDeg, radius, start, i, spanDeg, top, right, clockIsPaused;
//loading clock ----->
function loadClock()
{
sec = new Date().getSeconds() + 2;
min = new Date().getMinutes();
hr = new Date().getHours();
clock = ID("clock-wrapper");
secondHand = ID("clock-second");
minuteHand = ID("clock-minute");
hourHand = ID("clock-hour");
secDeg = (sec * 6);
minDeg = (min + (sec / 60)) * 6;
hrDeg = ((hr - 12) * 30) + ((min / 60) * 30);
}
document.addEventListener("visibilitychange", loadClock);
loadClock();
radius = ((clock.offsetWidth - 20) / 2);
//starting clock ----->
function clockFunc()
{
secondHand.style.WebkitTransform = "rotate(" + secDeg + "deg)";
minuteHand.style.WebkitTransform = "rotate(" + minDeg + "deg)";
hourHand.style.WebkitTransform = "rotate(" + hrDeg + "deg)";
secondHand.style.transform = "rotate(" + secDeg + "deg)";
minuteHand.style.transform = "rotate(" + minDeg + "deg)";
hourHand.style.transform = "rotate(" + hrDeg + "deg)";
secDeg += 6; minDeg += 0.1; hrDeg += 0.1/60;
hr = new Date().getHours();
if (hr > 11)
ID("am-pm").innerHTML = "PM";
else
ID("am-pm").innerHTML = "AM";
}
function startClock()
{ start = setInterval(clockFunc, 1000); }
startClock();
//creating hours strokes (with the <span> tag) ----->
for (i = 0, spanDeg = 0; i < 12; i++, spanDeg += 30)
{
top = (Math.cos(spanDeg * Math.PI/180) * (radius - 10)).toFixed(6);
right = (Math.sin(spanDeg * Math.PI/180) * (radius - 10)).toFixed(6);
clock.insertAdjacentHTML("beforeend", "<span class='digits d" + i + "'></span>");
clock.getElementsByClassName("d"+i)[0].style.WebkitTransform = "rotate(" + spanDeg + "deg)";
clock.getElementsByClassName("d"+i)[0].style.transform = "rotate(" + spanDeg + "deg)";
clock.getElementsByClassName("d"+i)[0].style.top = ((radius - 9.5) - top) + "px";
clock.getElementsByClassName("d"+i)[0].style.right = ((radius - 1.5) - right) + "px";
}
//creating minutes strokes (with the <span> tag) ----->
for (i = 0, spanDeg = 0; i < 60; i++, spanDeg += 6)
{
if (spanDeg % 30 !== 0)
{
top = (Math.cos(spanDeg * Math.PI/180) * (radius - 10)).toFixed(6);
right = (Math.sin(spanDeg * Math.PI/180) * (radius - 10)).toFixed(6);
clock.insertAdjacentHTML("beforeend", "<span class='mini-digits md" + i + "'></span>");
clock.getElementsByClassName("md"+i)[0].style.WebkitTransform = "rotate(" + spanDeg + "deg)";
clock.getElementsByClassName("md"+i)[0].style.transform = "rotate(" + spanDeg + "deg)";
clock.getElementsByClassName("md"+i)[0].style.top = ((radius - 4) - top) + "px";
clock.getElementsByClassName("md"+i)[0].style.right = ((radius - 0.5) - right) + "px";
}
else continue;
}
//freeze/unfreeze time ----->
ID("my-name").onclick = function()
{
if (clockIsPaused)
clockIsPaused = false,
loadClock(),
setTimeout(startClock, 0);
else
clockIsPaused = true,
clearInterval(start);
};
};
//END ----->19. By Humayra🇧🇩
Made by Humayra🇧🇩. Kitty clock , cat holding a digital clock. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">
</head>
<body onLoad="myFunction()">
<div class="container">
<div class="face1">
<div class="floor"></div>
<div class="body1"></div>
<div class="face2">
<div class="paw"></div>
<div id="Clock"></div>
<div class="leftEye"></div>
<div class="rightEye"></div>
<div class="mouth1"></div>
<div class="mouth2"></div>
<div class="blushL"></div>
<div class="blushR"></div>
<div class="nose">
</div>
<div class="ear1">
<div class="inEar1"></div>
</div>
<div class="ear2">
<div class="inEar2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
------CSS-------
body {
background: violet;
font-family: 'Kaushan Script', cursive;
}
.container{
position: fixed;
top: 5%;
left: -15%;
right: 5%;
width: 60%;
height: 60%;
margin: 0 auto;
}
.face1{
position: absolute;
width: 150px;
background: linear-gradient(to bottom right, #ffffff 69%, #ffccff 85%);
height: 150px;
top: 25%;
left: 10%;
right: 10%;
border-radius: 100%;
}
.face2{
position: absolute;
width: 100%;
background: linear-gradient(to bottom right, #ffffff 69%, #ffccff 85%);
height: 100%;
top: 0;
left: 0;
right: 0;
border-radius: 100%;
}
.ear1{
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
clip-path: polygon(0 0, 0% 100%, 100% 100%);
position: absolute;
background: white;
width: 90px;
height: 90px;
top: -20%;
left: 0%;
transform: rotate(0deg);
right: 10%;
}
.ear2{
-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
position: absolute;
background: white;
width: 90px;
height: 90px;
top: -20%;
transform: rotate(0deg);
right: 0%;
}
.inEar1{
position: absolute;
height: 101%;
width: 40%;
background: linear-gradient(to bottom right, #ff99aa 66%, #ff0066 100%);
border-radius: 50%;
top: 0;
left: -25%;
}
.inEar2{
position: absolute;
height: 101%;
width: 40%;
background: linear-gradient(to bottom left, #ff99aa 66%, #ff0066 100%);
border-radius: 50%;
top: 0;
right: -25%;
}
.leftEye{
position: absolute;
background: transparent;
height: 65px;
width: 30px;
top: 35%;
left: 20%;
border-top: solid 5px black;
border-right: solid 5px transparent;
border-bottom: solid 5px transparent;
border-right: solid 5px transparent;
border-left: solid 5px transparent;
z-index: 2;
border-radius: 50%;
}
.rightEye{
position: absolute;
background: transparent;
height: 65px;
width: 30px;
top: 35%;
right: 20%;
border-top: solid 5px black;
border-right: solid 5px transparent;
border-bottom: solid 5px transparent;
border-right: solid 5px transparent;
border-left: solid 5px transparent;
z-index: 2;
border-radius: 50%;
}
.nose{
-webkit-clip-path: polygon(51% 0, 100% 34%, 52% 100%, 0 33%);
clip-path: polygon(51% 0, 100% 34%, 52% 100%, 0 33%);
position: absolute;
top: 50%;
width: 20px;
height: 15px;
border-radius: 50%;
background: black;
left: 45%;
right: 45%;
}
.mouth1{
position: absolute;
background: black;
top: 55%;
height: 25px;
width: 3px;
z-index: 3;
left: 51%;
right: 45%;
}
.mouth2{
position: absolute;
background: transparent;
top: 32%;
height: 55px;
width: 55px;
border-radius: 50%;
border-top: solid 4px transparent;
border-right: solid 4px transparent;
border-bottom: solid 4px black;
border-left: solid 4px transparent;
z-index: 3;
left: 30%;
right: 45%;
}
.blushL{
position: absolute;
top: 50%;
left: 10%;
width: 20px;
height: 10px;
border-radius: 50%;
background: #ff0066;
z-index: 4;
}
.blushR{
position: absolute;
top: 50%;
right: 10%;
width: 20px;
height: 10px;
border-radius: 50%;
background: #ff0066;
z-index: 4;
}
.body1{
position: absolute;
width: 100%;
background: linear-gradient(to top left, #ffffff 69%, #ffccff 85%);
height: 130%;
top: 65%;
left: 7%;
border-bottom-left-radius: 10%;
border-bottom-right-radius: 10%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
#Clock{
position: absolute;
top: 130%;
right: -77%;
width: 240px;
height: 95px;
background: hotpink;
z-index: 4;
border-radius: 20px;
padding: 20%;
font-size: 40pt;
color: white;
text-align: center;
animation: time 2s infinite ;
}
@keyframes time{
50%{
text-shadow: 3px 3px 3px lightpink;
}
}
.paw{
position: absolute;
top: 117%;
right: -10%;
width: 50px;
height: 35px;
border-bottom-left-radius: 10%;
border-bottom-right-radius: 10%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
background: linear-gradient(to top left, #ffffff 69%, #ffccff 85%);
z-index: 5;
}
.floor{
position: absolute;
top: 160%;
left: -70%;
width: 800%;
height: 600%;
background: purple;
}
-----JS------
function myFunction(){
setInterval(function(){
let d = new Date();
let hours = d.getHours();
let minutes = d.getMinutes();
let seconds = d.getSeconds();
document.getElementById("Clock").innerHTML = hours + ":" + minutes + ":" + seconds;
},500)
}20. By Perplexed Coder
Made by Perplexed Coder. Analog clock with dark mode, it also displays the current date. ( Source )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Multi-themed Clock</title>
</head>
<body>
<button class="toggle">Dark mode</button>
<div class="clock-container">
<div class="clock">
<div class="needle hour"></div>
<div class="needle minute"></div>
<div class="needle second"></div>
<div class="center-point"></div>
</div>
<div class="time"></div>
<div class="date"></div>
</div>
<script src="script.js"></script>
<a href="https://youtu.be/3YoxlU1XzZ8" target="_blank">Click here for tutorial</a>
</body>
</html>
-------CSS-------
@import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap');
* {
box-sizing: border-box;
}
a{
display: block;
width: 100%;
font-family: 'Poppins',sans-serif;
font-size: 18px;
text-align: center;
padding: 10px 0;
text-decoration: none;
background-color: red;
color: white;
position: absolute;
bottom: 0;
border-radius: 5px;
}
:root {
--primary-color: #000;
--secondary-color: #fff;
}
html {
transition: all 0.5s ease-in;
}
html.dark {
--primary-color: #fff;
--secondary-color: #333;
}
html.dark {
background-color: #111;
color: var(--primary-color);
}
body {
font-family: 'Heebo', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.toggle {
cursor: pointer;
background-color: var(--primary-color);
color: var(--secondary-color);
border: 0;
border-radius: 4px;
padding: 8px 12px;
position: absolute;
top: 90px;
z-index:2;
}
.toggle:focus {
outline: none;
}
.clock-container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.clock {
position: relative;
width: 200px;
height: 200px;
}
.needle {
background-color: var(--primary-color);
position: absolute;
top: 50%;
left: 50%;
height: 65px;
width: 3px;
transform-origin: bottom center;
transition: all 0.5s ease-in;
}
.needle.hour {
transform: translate(-50%, -100%) rotate(0deg);
}
.needle.minute {
transform: translate(-50%, -100%) rotate(0deg);
height: 100px;
}
.needle.second {
transform: translate(-50%, -100%) rotate(0deg);
height: 100px;
background-color: #e74c3c;
}
.center-point {
background-color: #e74c3c;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.center-point::after {
content: '';
background-color: var(--primary-color);
width: 5px;
height: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.time {
font-size: 60px;
}
.date {
color: #aaa;
font-size: 14px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.date .circle {
background-color: var(--primary-color);
color: var(--secondary-color);
border-radius: 50%;
height: 20px;
width: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 19px;
transition: all 0.5s ease-in;
font-size: 12px;
}
------JS-------
window.onload=()=>{
const hourEl = document.querySelector('.hour')
const minuteEl = document.querySelector('.minute')
const secondEl = document.querySelector('.second')
const timeEl = document.querySelector('.time')
const dateEl = document.querySelector('.date')
const toggle = document.querySelector('.toggle')
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
toggle.addEventListener('click', (e) => {
const html = document.querySelector('html')
if (html.classList.contains('dark')) {
html.classList.remove('dark')
e.target.innerHTML = 'Dark mode'
} else {
html.classList.add('dark')
e.target.innerHTML = 'Light mode'
}
})
function setTime() {
const time = new Date();
const month = time.getMonth()
const day = time.getDay()
const date = time.getDate()
const hours = time.getHours()
const hoursForClock = hours >= 13 ? hours % 12 : hours;
const minutes = time.getMinutes()
const seconds = time.getSeconds()
const ampm = hours >= 12 ? 'PM' : 'AM'
hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 11, 0, 360)}deg)`
minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 59, 0, 360)}deg)`
secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 59, 0, 360)}deg)`
timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`
}
// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
setTime()
setInterval(setTime, 1000)
}21. By Suraj Jha
Made by Suraj Jha. Hybrid clock that has both analog and digital clock. ( Source )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Clock v1.0</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section class="clock-container">
<div class="hour">1</div>
<div class="hour">2</div>
<div class="hour">3</div>
<div class="hour">4</div>
<div class="hour">5</div>
<div class="hour">6</div>
<div class="hour">7</div>
<div class="hour">8</div>
<div class="hour">9</div>
<div class="hour">10</div>
<div class="hour">11</div>
<div class="hour">12</div>
<div class="digital-clock-time"></div>
<div class="hour-hand"></div>
<div class="min-hand"></div>
<div class="sec-hand"></div>
<div class="mid-point"></div>
</section>
<!-- Script is only for updating time-->
<script>
let hourHand = document.querySelector('.hour-hand');
let minHand = document.querySelector('.min-hand');
let secHand = document.querySelector('.sec-hand');
let digitalClock = document.querySelector('.digital-clock-time');
let updateTime = () => {
let d = new Date();
let sec = d.getSeconds();
let min = d.getMinutes();
let hour = d.getHours() % 12;
digitalClock.innerText = `${('00' + hour).substr(-2)}:${('00' + min).substr(-2)}:${('00' + sec).substr(-2)}`;
min = min + sec / 60;
hour = hour + min / 60;
secHand.style.transform = `translate3d(13vmin, 0, 8px) rotateZ(${6 * sec - 90}deg)`;
minHand.style.transform = `translate3d(11vmin, 0, 6px) rotateZ(${6 * min - 90}deg)`;
hourHand.style.transform = `translate3d(9vmin, 0, 4px) rotateZ(${30 * hour - 90}deg)`;
}
setInterval(updateTime, 1000);
updateTime();
</script>
</body>
</html>
-----CSS------
body {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
overflow: hidden;
background-color: rgb(180, 255, 255);
}
.clock-container {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
width: 92vmin;
height: 92vmin;
border-radius: 100%;
box-shadow: inset 0 0 8px 2px rgba(0, 0, 0, 0.5);
background-color: rgb(230, 255, 255);
}
.digital-clock-time {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 45vmin;
height: 15vmin;
font-size: 9vmin;
font-family: monospace;
border-radius: 5px;
background-color: rgba(0, 255, 234, 0.3);
box-shadow: inset 0 0 8px 1px rgba(0, 0, 0, 0.5);
transform: translate3d(0, -17vmin, 0);
}
.hour {
position: absolute;
font-size: 10vmin;
}
.hour:nth-child(1) {
transform: translate3d(20vmin, -34.6vmin, 0);
}
.hour:nth-child(2) {
transform: translate3d(34.6vmin, -20vmin, 0);
}
.hour:nth-child(3) {
transform: translate3d(40vmin, 0, 0);
}
.hour:nth-child(4) {
transform: translate3d(34.6vmin, 20vmin, 0);
}
.hour:nth-child(5) {
transform: translate3d(20vmin, 34.6vmin, 0);
}
.hour:nth-child(6) {
transform: translate3d(0, 40vmin, 0);
}
.hour:nth-child(7) {
transform: translate3d(-20vmin, 34.6vmin, 0);
}
.hour:nth-child(8) {
transform: translate3d(-34.6vmin, 20vmin, 0);
}
.hour:nth-child(9) {
transform: translate3d(-40vmin, 0, 0);
}
.hour:nth-child(10) {
transform: translate3d(-34.6vmin, -20vmin, 0);
}
.hour:nth-child(11) {
transform: translate3d(-20vmin, -34.6vmin, 0);
}
.hour:nth-child(12) {
transform: translate3d(0, -350%, 0);
}
.hour-hand {
position: absolute;
width: 28vmin;
height: 2vmin;
background-color: #000;
/* transform: translate3d(9vmin, 0, 4px) rotateZ(45deg); set by js */
box-shadow: 0 0 1px -1px black;
transform-origin: 5vmin 1vmin;
}
.min-hand {
position: absolute;
width: 36vmin;
height: 1.6vmin;
background-color: #000;
/* transform: translate3d(11vmin, 0, 6px) rotateZ(-90deg); set by js */
box-shadow: 0 0 1px -1px black;
transform-origin: 7vmin 0.8vmin;
}
.sec-hand {
position: absolute;
width: 44vmin;
height: 0.8vmin;
background-color: #000;
/* transform: translate3d(13vmin, 0, 8px) rotateZ(-45deg); set by js */
box-shadow: 0 0 1px -1px black;
transform-origin: 9vmin 0.4vmin;
}
.mid-point {
position: absolute;
width: 4vmin;
height: 4vmin;
border-radius: 100%;
background-color: red;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.4);
transform: translate3d(0, 0, 10px);
}22. By manojkdm18
Made by manojkdm18. JavaScript Digital clock that also displays the date. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>-Clock-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="time">
</div>
<strong><p id="date"></p></strong>
</body>
</html>
------CSS-------
#time{
height:70px;
width:250px;
background-color:black;
margin-top:180px;
margin-left:60px;
font-size:40px;
text-align:center;
padding-top:20px;
color:white;
border-radius:5px;
border:2px solid white;
font-style:sanSerif;
box-shadow:0px 2px 30px 2px #bbb ;
}
#date{
color:#fff;
margin-top:-17px;
margin-left:80px;
font-size:10px;
}
------JS------
$(document).ready(function(){
time();
$("#time").click(function(){
$("#time").css("background-color","white");
$("#time").css("color","#bbb");
$("#date").css("color","#bbb");
});
});
function time(){
var d= new Date();
var hrs= d.getHours();
var min= d.getMinutes();
var sec= d.getSeconds();
var day =d.getDate();
var yrs = d.getFullYear();
var ampm = hrs>=12 ? "PM":"AM";
var localTime = d.toLocaleTimeString();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var month = new Array(12);
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var p = month[d.getMonth()];
var n = weekday[d.getDay()];
/*
var display = document.getElementById("time").innerHTML=
hrs+":"+min+":"+sec+" "+ampm;
*/
var display = document.getElementById("time").innerHTML=localTime;
var displayDate = document.getElementById("date").innerHTML="• "+n+" "+day+"/"+p+"/"+yrs;
}
setInterval(time,1);23. By Thanh
Made by Thanh. Cube clock that displays the time in a cube, the time is displayed in the cubes faces. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name=viewport content='width=device-width, initial-scale=1.0'/>
</head>
<body>
<div class=box-clock>
<div class=mp-1>
</div>
<div class=mp-2>
</div>
<div class=mp-3>
<span class=rotate-90>
</span>
</div>
</div>
</body>
</html>
------CSS------
* {
margin: 0;
padding: 0;
}
@font-face {
font-family: 'Digital-7';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: #333 !important;
}
@-webkit-keyframes color {
0% {
color: #2982ff;
text-shadow: 0px 0px 5px #000;
}
50% {
color: #cc4343;
text-shadow: 0px 0px 5px #ff0000;
}
}
@keyframes color {
0% {
color: #2982ff;
text-shadow: 0px 0px 5px #000;
}
50% {
color: #cc4343;
text-shadow: 0px 0px 5px #ff0000;
}
}
div[class*='mp'] {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
text-align: center;
text-weight: bold;
line-height: 100px;
font-size: 5rem;
font-family: 'Digital-7', sans-seift;
}
.box-clock {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(1000px) rotateX(-45deg) rotateY(-45deg) translateX(-100%) translateY(-100%);
transform: perspective(1000px) rotateX(-45deg) rotateY(-45deg) translateX(-100%) translateY(-100%);
-webkit-animation: color 10s infinite;
animation: color 10s infinite;
color: #2982FF;
text-shadow: 0px 0px 5px #000;
}
.mp-1 {
background: #111;
}
.mp-2 {
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: translateX(100%) rotateY(90deg);
transform: translateX(100%) rotateY(90deg);
background: #151515;
border-left: 0;
}
.mp-3 {
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: translateY(-100%) rotateX(90deg);
transform: translateY(-100%) rotateX(90deg);
background: #222;
border-right: 0;
border-bottom: 0;
}
.rotate-90 {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: initial;
-ms-transform-origin: initial;
transform-origin: initial;
display: block;
}
-------JS-------
function fix2len (e) {return Number(e) > 9 ? '' + e : '0' + e}
var El = document.querySelectorAll.bind(document)
function autoCall () {
var n = new this.Date
El('.mp-1')[0].innerText =
fix2len(n.getHours())
El('.mp-2')[0].innerText =
fix2len(n.getMinutes())
El('.mp-3 > span')[0].innerText =
fix2len(n.getSeconds())
setTimeout(autoCall, 1000)
}
window.onload = autoCall24. By Bartika
Made by Bartika. Neon themed digital clock. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 id="go"></h1>
</body>
</html>
------CSS------
body {
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQeyxIYiYoq8byY_GyK45kfjlsaAIQ3v7PPCXIRqR87EzE51ju3&usqp=CAU");
margin:0;
height:100vh;
width:100vw;
display:flex;
align-items:center;
justify-content:center;
}
h1{
width:200px;
padding:80px;
background:#221211;
text-align:center;
color:white;
text-shadow:0 0 4px deeppink,
0 0 4px deeppink,
0 0 8px deeppink,
0 0 8px deeppink,
0 0 40px deeppink,
0 0 40px deeppink,
0 0 40px deeppink,
0 0 80px deeppink,
0 0 80px deeppink,
0 0 80px deeppink;
font-family:cursive;
font-size:50px;
border-radius:10%;
box-shadow:0 0 30px 0 white;
}
------JS------
window.onload= function setDeg(){
var time= new Date
document.getElementById('go').innerHTML=zero(time.getHours())+":"+zero(time.getMinutes())+":"+zero(time.getSeconds())
setInterval(setDeg,1000)
}
function zero(x){
if (x<10){
x="0"+x
}
return x
}25. By Rochie
Made by Rochie. Simple animated analog clock that also shows the current date. It also plays the coffin dance song. ( Source )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/sweetalert2/6.4.3/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<title> Clock </title>
</head>
<body>
<div class="hr_1"></div>
<div class="hr_4"></div>
<div class="hr_2"></div>
<div class="hr_3"></div>
<div class="hr_5"></div>
<div class="hr_6"></div>
<div class="hr_7"></div>
<div class="hr_8"></div>
<div class="hr_9"></div>
<div class="out_body">
<div class="in_body"></div>
<div class="shadow"></div>
<div class="num_clr">
<div class="twelve">12</div>
<div class="one"> </div>
<div class="two"> </div>
<div class="three">3</div>
<div class="four"> </div>
<div class="five"> </div>
<div class="six">6</div>
<div class="seven"> </div>
<div class="eight"> </div>
<div class="nine">9</div>
<div class="ten"> </div>
<div class="eleven"> </div>
</div>
<div id="hour"></div>
<div id="minute"></div>
<div id="seconds"></div>
<div class="dot"></div>
</div> <br>
<p id="clock" > </p>
<p id="date"> </p>
<audio controls style="display:none;" loop id="audio">
<source id="audio-source"
src="https://www.dropbox.com/s/epy8k8er5ahaakr/coffin_dance__guitar.mp3?raw=1"> </audio>
</body>
</html>
-----CSS------
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
margin:0;
text-align:center;
background-color: #17223b;
overflow: hidden;
}
.hr_1{
width: 60vw;
height: 8vw;
background-image: linear-gradient(to right , #5bd1d7 , transparent);
border-radius: 5vw;
transform: rotate(-35deg);
position: absolute;
top: 80vw;
left: 5vw;
}
.hr_2{
width: 60vw;
height: 8vw;
background-image: linear-gradient(to right , #348498 , transparent);
border-radius: 5vw;
transform: rotate(-35deg);
position: absolute;
top: 77vw;
left: -2vw;
}
.hr_3{
width: 50vw;
height: 8vw;
background-image: linear-gradient(to right , #5bd1d7 , transparent);
border-radius: 5vw;
transform: rotate(-35deg);
position: absolute;
top: 65vw;
left: 50vw;
}
.hr_4{
width: 58vw;
height: 8vw;
background-image: linear-gradient(to right , palegreen , #17223b);
border-radius: 5vw;
transform: rotate(-35deg);
position: absolute;
top: 65vw;
left: 5vw;
}
.hr_5{
width: 50vw;
height: 8vw;
background-image: linear-gradient(to right , palegreen , transparent );
border-radius: 5vw;
transform: rotate(-35deg);
position: absolute;
top: 45vw;
left: 50vw;
}
.hr_6{
width: 90vw;
height: 8vw;
background-image: linear-gradient(to right , #5bd1d7 , transparent );
border-radius: 5vw;
transform: rotate(-35deg);
position: absolute;
top: 168vw;
left: 12vw;
}
.hr_7{
width: 90vw;
height: 8vw;
background-image: linear-gradient(to right , palegreen , transparent );
border-radius: 5vw;
transform: rotate(-35deg);
position: absolute;
top: 153vw;
left: 15vw;
}
.hr_8{
width: 50vw;
height: 8vw;
background-image: linear-gradient(to right , palegreen , transparent );
border-radius: 5vw;
transform: rotate(-35deg);
position: absolute;
top: 15vw;
left: -25vw;
}
.hr_9{
width: 50vw;
height: 8vw;
background-image: linear-gradient(to right , #5bd1d7 , transparent );
border-radius: 5vw;
transform: rotate(-35deg);
position: absolute;
top: 20vw;
left: -10vw;
}
.out_body{
width:55vw;
height:55vw;
border-radius:50%;
background-image: linear-gradient(45deg , #94cfcb , #114455 );
);
margin-top:45vw;
margin-left:23vw;
}
.in_body{
display: block;
width:45vw;
height:45vw;
border-radius:50%;
background-color:#348498;
position:absolute ;
top:50vw;
left:28vw;
}
.shadow{
width:23vw;
height:23vw;
border-radius:50%;
background-color:#eee;
position:absolute ;
top:61vw;
left:39.5vw;
opacity:.3;
}
.twelve{
font-family: 'Titillium Web', sans-serif;
font-size: 4.6vw;
color: #8ac6d1;
position: absolute;
top: 50vw;
left: 47.5vw;
}
.three{
font-family: 'Titillium Web', sans-serif;
font-size: 4.6vw;
color: #8ac6d1;
position:absolute ;
top:69vw;
left:68vw;
}
.six{
font-family: 'Titillium Web', sans-serif;
font-size: 4.6vw;
color: #8ac6d1;
position:absolute ;
top:88vw;
left:48.8vw;
}
.nine{
font-family: 'Titillium Web', sans-serif;
font-size: 4.6vw;
color: #8ac6d1;
position:absolute ;
top:69vw;
left:30vw;
}
.one{
font-family: 'Titillium Web', sans-serif;
width:2vw;
height:2vw;
border-radius: 50%;
background-color:#8ac6d1;
position:absolute ;
top:55.1vw;
left:58.8vw;
}
.two{
font-family: 'Titillium Web', sans-serif;
width:2vw;
height:2vw;
border-radius: 50%;
background-color:#8ac6d1;
position:absolute ;
top:62vw;
left:65.5vw;
}
.four{
font-family: 'Titillium Web', sans-serif;
width:2vw;
height:2vw;
border-radius: 50%;
background-color:#8ac6d1;
position:absolute ;
top:80.6vw;
left:65.6vw;
}
.five{
font-family: 'Titillium Web', sans-serif;
width:2vw;
height:2vw;
border-radius: 50%;
background-color:#8ac6d1;
position:absolute ;
top:87.2vw;
left:59vw;
}
.seven{
font-family: 'Titillium Web', sans-serif;
width:2vw;
height:2vw;
border-radius: 50%;
background-color:#8ac6d1;
position:absolute ;
top:88.3vw;
left:39.8vw;
}
.eight{
font-family: 'Titillium Web', sans-serif;
width:2vw;
height:2vw;
border-radius: 50%;
background-color:#8ac6d1;
position:absolute ;
top:80.8vw;
left:33vw;
}
.ten{
font-family: 'Titillium Web', sans-serif;
width:2vw;
height:2vw;
border-radius: 50%;
background-color:#8ac6d1;
position:absolute ;
top:61.8vw;
left:33.3vw;
}
.eleven{
font-family: 'Titillium Web', sans-serif;
width:2vw;
height:2vw;
border-radius: 50%;
background-color:#8ac6d1;
position:absolute ;
top:54.7vw;
left:39.9vw;
}
.dot{
width:3vw;
height: 3vw;
background-color: #17223b;
border-radius: 50%;
position: absolute;
top: 70.5vw;
left:49.2vw;
}
#hour{
height: 12vw;
width: 1.3vw;
position: absolute;
top: 60.5vw;
left:50vw;
background-color: palegreen;
opacity: .5;
border-radius: 1.3vw;
transform-origin: bottom;
}
#minute{
height: 18vw;
width: 1.3vw;
position: absolute;
top: 54vw;
left:50vw;
background-color: palegreen;
opacity: .5;
border-radius: 1.3vw;
transform-origin: bottom;
}
#seconds{
height: 23vw;
width: .8vw;
opacity: .7;
position: absolute;
top:69vw;
left:50.3vw;
background-color: #17223b;
border-radius: 1.3vw;
transform-origin: 45% 13%;
}
#clock{
font-size:6vw;
font-family: 'Montserrat', sans-serif;
background-image: linear-gradient(to left , #5bd1d7 , transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#date{
font-size:5.5vw;
font-family: 'Montserrat', sans-serif;
margin-top:-4vw;
background-image: linear-gradient(to left , #5bd1d7 , transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
------JS-------
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var seconds = document.getElementById("seconds");
var clock = setInterval(function clock() {
var date = new Date();
var hr = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var hr_setup = (hr * 30) + (min / 2);
var min_setup = (min * 6) + (sec / 10);
var sec_setup = sec * 6;
hour.style.transform = 'rotate(' + hr_setup + "deg)";
minute.style.transform = 'rotate(' + min_setup + 'deg)';
seconds.style.transform = 'rotate(' + sec_setup + 'deg)';
}, 1000);
function currentTime() {
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var midday = "AM";
midday = (hour >= 12) ? "PM" : "AM";
hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour);
hour = updateTime(hour);
min = updateTime(min);
sec = updateTime(sec);
document.getElementById("clock").innerText = hour + " : " + min + " : " + sec + " " + midday;
var t = setTimeout(currentTime, 1000);
}
function updateTime(t) {
if (t < 10) {
return "0" + t;
}
else {
return t;
}
}
currentTime();
var d = new Date()
var day = new Array("Sun","Mon","Tue","Wed","Thu",
"Fri","Sat");
var month = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug",
"Sep","Oct","Nov","Dec");
document.getElementById("date").innerHTML= day[d.getDay()] + " , " + d.getDate() + " " + month[d.getMonth()] + " , " + d.getFullYear();
window.addEventListener("mouseover",play);
window.addEventListener("click",play);
function play(){ document.getElementById("audio").play();
}
swal("Disclaimer ", " Dangerous song \n 👻 Enter at your own risk 👻 " ,"warning");26. By MSN
Made by MSN. Simple Digital clock with very simple styling. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Clock</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div id="container">
<span id="hours"></span>
<span>:</span>
<span id="mins"></span>
<span>:</span>
<span id="seconds"></span>
<span id="ampm"></span>
</div>
</body>
</html>
-----CSS------
body {
background:black;
}
#container {
background:black;
border:10px solid white;
border-radius:30px;
color:white;
width:90%;
text-align:center;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:40px;
font-weight:bolder;
font-family:"Times new roman";
}
-----JS------
$(function(){
setInterval(time,1000);
});
function time(){
var d = new Date();
var sec = d.getSeconds().toString();
var min = d.getMinutes().toString();
var hour = d.getHours().toString();
var ampm;
if(hour > 12){
ampm = "PM";
hour %= 12;}
else {
ampm = "AM";}
if(sec.length == 1)
sec = 0 + sec;
if(min.length == 1)
min = 0 + min;
if(hour.length == 1)
hour = 0 + hour;
$("#hours").text(hour);
$("#mins").text(min);
$("#seconds").text(sec);
$("#ampm").text(ampm);
}27. By Sakshi
Made by Sakshi. Analog clock with image as a background. ( Source )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Javascript Clock Ul Dark</title>
<link rel="stylesheet" href="result.css">
<link href="https://fonts.googleapis.com/css2?family=Palette+Mosaic&family=Style+Script&family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
</head>
<body>
<audio controls style="display:none;" loop id="music">
<source id="music"
src="https://www.mboxdrive.com/Little%20Do%20You%20Know%20-%20Alex%20_%20Sierra%20(Guitar%20Fingerstyle%20Cover)(MP3_320K).mp3"> </audio>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<div class="bg"></div>
<div class="bg2"></div>
<div class="creator">Creator - Sakshi</div>
</body>
</html>
------CSS-------
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://i.ibb.co/853DxhL/Pics-Art-07-28-10-49-08.jpg");
/* background-size: 385px; */
background-size: cover;
}
.clock {
width: 150px;
background-image: linear-gradient(to left , #C9C30048, transparent);
height:150px;
display: flex;
justify-content: center;
align-items: center;
position:absolute ;
top: 35vh;
background-image:;
margin-left: 0px;
background-size: cover;
border-radius: 50%;
}
.clock:before {
content: '';
position: absolute;
width: 15px;
height: 15px;
background-color: #091921;
border-radius: 50%;
z-index: 10000;
}
.clock .hour,
.clock .min,
.clock .sec {
position: absolute;
}
.clock .hour, .hr {
width: 60px;
height: 53px;
}
.clock .min, .mn {
width: 90px;
height: 74px;
}
.clock .sec, .sc {
width: 130px;
height: 90px;
}
.hr, .mn, .sc {
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.hr:before {
content: '';
position: absolute;
width: 4px;
height: 34px;
z-index: 10;
border-radius: 6px 6px 0 0;
background: linear-gradient(235deg, #e100c3, #ff2b9d, #00b0b5, #000000, #99b500);
background-size: 1000% 1000%;
-webkit-animation: AnimationName 5s ease infinite;
-moz-animation: AnimationName 5s ease infinite;
-o-animation: AnimationName 5s ease infinite;
animation: AnimationName 5s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.mn:before {
content: '';
position: absolute;
width: 2px;
height: 44px;
background-color: #fff;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: '';
position: absolute;
width: 1px;
height: 44px;
background-color: red;
z-index: 12;
border-radius: 6px 6px 0 0;
}
.bg{
height: 152px;
width: 152px;
background-image: url("https://i.ibb.co/2yJx9bV/Pics-Art-07-29-09-32-59.png");
position: absolute;
z-index: -9999;
background-size: 155px;
top: 34.6vh;
margin-left: 0px;
}
.bg2{
height: 228px;
width: 243px;
background-image: url("https://i.ibb.co/hHK1yMh/kisspng-gear-gold-icon-red-tech-gear-5a96451bca81f9-5392507215197975318295.png");
position: absolute;
z-index: -99999999;
opacity: 0.5;
filter: alpha(opacity=30);
background-size: cover;
top: 30vh;
margin-left: 0px;
}
.creator{
font-size:25px;
/*margin-top: 640px;*/
color: white;
position: absolute;
top:68vh;
z-index: 99;
position: fixed;
shadow: 10px 10px 40px black;
font-family: 'Style Script', cursive;
}
-----JS------
const deg = 6;
const hr = document.querySelector('#hr'); const min= document.querySelector('#mn'); const sec = document.querySelector('#sc'); setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg; let ss = day.getSeconds() * deg; hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`; mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`; })
window.addEventListener("mouseover",play);
window.addEventListener("click",play);
function play(){ document.getElementById("music").play();
}28. By Mohammad
Made by Mohammad. Analog clock with minimum styling. The clock doesn’t have time printed in it. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div class="clock">
<div class="min-div">
<div class="min"></div>
</div>
<div class="hour-div">
<div class="hour"></div>
</div>
<div class="sec-div">
<div class="sec"></div>
</div>
<div class="div"></div>
</div>
</body>
</html>
------CSS------
body{
background-color:#fff2de;
}
.clock {
border:6px solid #ff6600;
width:250px;
height:250px;
border-radius:50%;
position:absolute ;
top:20%;
left:50%;
transform:translate(-50%) rotate(-90deg);
}
.sec-div{
position:absolute;
left:47.5%;
top:47.5%;
background-color:#ffffff;
width:13px;
height:13px;
border-radius:50%;
z-index:10;
}
.sec {
position:absolute;
left:50%;
top:50%;
transform:translate(-50% , -50%);
background-color:red;
height:3px;
width:120px;
margin-left:60px;
border-radius:1vw;
}
.min-div{
position:absolute;
left:47.5%;
top:47.5%;
background-color:#ff6600;
width:13px;
height:13px;
border-radius:50%;
z-index:15;
}
.min {
position:absolute;
left:50%;
top:50%;
transform:translate(-50% , -50%);
background-color:#ff6600;
height:6px;
width:107px;
margin-left:55px;
border-radius:1vw;
}
.hour-div{
position:absolute;
left:47.5%;
top:47.5%;
background-color:#ff6600;
width:13px;
height:13px;
border-radius:50%;
margin-right:100px;
}
.hour {
position:absolute;
left:50%;
top:50%;
transform:translate(-50% , -50%);
background-color:#ff6600;
height:8px;
width:80px;
margin-left:36px;
border-radius:1vw;
}
.div{
position:absolute;
left:47.5%;
top:47.5%;
background-color:#ffffff;
width:10px;
height:10px;
border-radius:50%;
margin-right:100px;
z-index:20;
border:3px solid #ff6600;
}
.background{
background-color:black;
width:100px;
height:100px;
position:relative ;
top:70vw;
left:50%;
transform:translate(-50%);
}
-----JS-----
$(function(){
function time(){
var dt = new Date();
var sec = dt.getSeconds();
var min = dt.getMinutes();
var hour = dt.getHours();
var rsec = sec * 6;
var rmin = min * 6;
var rhour = hour * 30 + rmin/12;
$(".sec-div").css({"transform": "rotate("+rsec+"deg)"});
$(".min-div").css({"transform": "rotate("+rmin+"deg)"});
$(".hour-div").css({"transform": "rotate("+rhour+"deg)"});
}
setInterval(time , 1000);
});29. By Shahbaz Ali
Made by Shahbaz Ali. Digital clock with green and black theme. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron|Montserrat">
</head>
<body onload="showtime();">
<div>
<h1>Digital Clock</h1>
<h2>
<span id="h"></span>
<span id="blink">:</span>
<span id="m"></span>
<span id="blink">:</span>
<span id="s"></span>
</h2>
</div>
</body>
</html>
------CSS-------
body {
margin:0;
padding:0;
background-color:black;
}
h1{
text-align:center ;
color:black;
font-variant:small-caps;
text-shadow: 0 0 2px lime
, 0 0 4px lime
, 0 0 6px lime
, 0 0 8px lime;
}
div{
width: 250px;
height: 150px;
background-color:black;
border:1px solid lime;
border-radius:10px 10px 10px 10px;
margin:auto ;
margin-top:20%;
box-shadow: 0px 0px 10px 1px lime;
}
h2{
color:black;
font-family: Orbitron;
font-size:33px;
font-weight:bold ;
text-align:center ;
margin-top:20px;
}
#h,#m,#s{
text-shadow: 0 0 2px lime
, 0 0 4px lime
, 0 0 6px lime
, 0 0 8px lime;
}
#blink{
text-shadow: 0 0 2px lime
, 0 0 4px lime
, 0 0 6px lime
, 0 0 8px lime;
animation:animate 1s linear infinite;
}
@keyframes animate
{
0%
{
color:lime;
text-shadow: 0 0 2px lime
, 0 0 4px lime
, 0 0 6px lime
, 0 0 8px lime;
}
100%
{
color:black;
text-shadow: 0 0 2px black
, 0 0 4px black
, 0 0 6px black
, 0 0 8px black;
}
}
------JS-------
function showtime()
{
var a = document.getElementById("h");
var b = document.getElementById("m");
var c = document.getElementById("s");
var i = document.getElementById("d");
var time = new Date;
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
if(h<=9)
{
h= "0"+h;
}
if(m<=9)
{
m= "0"+m;
}
if(s<=9)
{
s="0"+s;
}
a.innerHTML = h;
b.innerHTML = m;
c.innerHTML = s;
}
setInterval(showtime ,1000);30. By Vinayak
Made by Vinayak. The clock has both digital and analog clock that you can switch between. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Clock</title>
</head>
<body onload = "clock()">
<div id = "analog">
<div class= "btn">
<button onclick = "view()">Analog Clock</button>
<button onclick = "hide()">Digital Clock</button>
</div>
<div class = "outer">
<div class="hand hour"></div>
<div class="hand min"></div>
<div class="hand sec"></div>
</div>
</div>
<div id = "digital" style="display: none;">
<div class= "btn">
<button onclick = "view()">Analog Clock</button>
<button onclick = "hide()">Digital Clock</button>
</div>
<div class = "num" id = "clock">
00:00:00
</div>
</div>
</body>
</html>
-----CSS-----
body{
background: #daded4;
color: #fff;
}
.btn{
position:absolute;
top:10%;
left: 50%;
transform: translate(-50%,-50%);
}
button{
width: 150px;
height: 60px;
background-color: #3742e0;
border: 2px solid #3742e0;
color: #fff;
}
button:active{
border: 2px solid #3742e0;
}
.outer{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 10px solid rgb(255, 255, 255);
border-radius: 100%;
height: 250px;
width: 250px;
background: rgb(236 79 18 / 80%);
}
.hand{
position: absolute;
top: 50%;
left: 5%;
border: 2px solid rgb(55 46 132);
width: 110px;
}
.hour{
transform: rotate(90deg);
transform-origin: 100%;
}
.min{
transform: rotate(90deg);
transform-origin: 100%;
}
.sec{
transform: rotate(90deg);
transform-origin: 100%;
}
.num{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 60px;
color: #202020;
padding: 15px;
border: 10px solid;
border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
}
@media (max-width : 650px){
button{
width: 85px;
font-size:15px;
}
}
@media (max-height: 200px){
.outer{
margin-top: 150px;
}
}
-----JS------
// for hide and view onclick buttons
function view(){
document.getElementById("analog").style.display = "block";
document.getElementById("digital").style.display = "none";
}
function hide(){
document.getElementById("digital").style.display = "block";
document.getElementById("analog").style.display = "none";
}
//working of clock
function clock(){
var date = new Date();
var min = date.getMinutes();
var hour = date.getHours();
var sec = date.getSeconds();
// for analog clock
var h = ((hour/12)*360)+90;
var m = ((min/60)*360)+90;
var s = ((sec/60)*360)+90;
document.querySelector('.hour').style.transform = "rotate(" + h + "deg)";
document.querySelector('.min').style.transform = "rotate(" + m + "deg)";
document.querySelector('.sec').style.transform = "rotate(" + s + "deg)";
// for digital clock
if(hour>12){
hour = hour - 12;
}
if(hour<10){
hour = "0" + hour;
}
if(min<10){
min = "0" + min;
}
if(sec<10){
sec = "0" + sec;
}
document.getElementById("clock").innerHTML = hour + ':' + min + ':' + sec;
}
setInterval(clock, 1000);31. By PKA
Made by PKA. Digital clock that displays the time in 24h format. ( Source )
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Alegreya"
rel="stylesheet">
</head>
<body onload="start()">
<marquee id= "Pill"><b>Pill Digital Clock</b></marquee>
<div id="DigitalClock"></div>
</body>
</html>
------CSS-------
#DigitalClock
{
color:#55ff55;
background-color:#1111ff;
font-size:60px;
font-weight:bold;
width:305px;
padding:20px;
margin-top: 10px;
text-align: center;
font-family: "Alegreya", cursive;
box-shadow: 3px 4px 6px rgba(0, 4, 1, 0.5);
border-radius: 50px;
}
#Pill
{
color:#ffffff;
outline-color: 000;
background-color:#1111ff;
font-size:60px;
font-weight:bold;
width: 325px;
padding:10px;
text-align:center;
margin-top: 10px;
font-family: "Alegreya";
box-shadow: 3px 4px 6px rgba(9, 4, 1, 0.5);
border-radius: 30px;
}
------JS------
function start()
{
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = correctTime(m);
s = correctTime(s);
document.getElementById('DigitalClock').innerHTML = h + " h : " + m + " m : " + s;
//calling the function every second
var t = setTimeout(start, 1000);
}
//adding the zero if needed
function correctTime(i)
{
if (i < 10) {
i = "0" + i;
}
return i;
}32. By 丹ⓨㄩک廾
Made by 丹ⓨㄩک廾. Roman analog JavaScript clock that also displays the date and day. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]">
</script>
</head>
<body onclick="fn()">
<div id="sup">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="sup">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="sup">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="sup">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="sup">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="clock_body">
<div id="hr"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="cover"></div>
<div id="dt_tm">
<span id="date"></span>
<span id="month"></span><br>
<span id="day"></span>
</div>
<div id="tp">
<span>XII</span>
<span>VI</span>
</div>
<div id="lp">
<span>III</span>
<span>IX</span>
</div>
</div>
<div class="loader_container">
<div class="loader_sub">
<div id="loader_1"></div>
<div id="loader_2"></div>
<div id="loader_3"></div>
</div>
<div class="loader_text"></div>
</div>
<audio id="aud" preload="auto" controls loop autoplay>
<source src="https://www.dropbox.com/s/xp6ddn7kzpxc1r6/Clock-ticking-Turning-4-www.FesliyanStudios.com.mp3?dl=1" type="audio/mpeg"/>
</audio>
</body>
</html>
------CSS-------
*{
box-sizing:border-box;
}
body {
background-color:none;
overflow:hidden;
width:100vw;
}
#clock_body{
position:fixed;
top:calc(50vh - 125px);
left:calc(50vw - 125px);
height:250px;
width:250px;
background-color:white;
border-style:solid;
border-radius:50%;
box-shadow:inset 0 0 20px gray;
}
#clock_body > div{
position:absolute;
transform-origin:0% 50%;
border-radius:100px;
transform:rotate(-90deg);
}
#hr{
width:30%;
height:3px;
background-color:gray;
right:20%;
top:calc(50% - 1.5px);
}
#min{
width:45%;
height:2px;
background-color:gray;
right:5%;
top:calc(50% - 1px);
}
#sec{
width:49%;
height:1px;
background-color:red;
right:1%;
top:calc(50% - 0.5px);
}
#cover{
height:5px;
width:5px;
top:calc(50% - 2.5px);
left:calc(50% - 2.5px);
background-color:red;
transform-origin:50% 50% !important;
}
#tp{
height:20px;
width:100%;
background-color:transparent;
top:calc(50% - 10px);
transform-origin:50% 50% !important;
}
#tp,#lp > span{
display:inline-block;
text-align:center;
padding:2px;
font-size:18px;
}
#tp > span:nth-child(1){
float:right;
transform:rotate(90deg);
}
#tp > span:nth-child(2){
float:left;
transform:rotate(90deg);
}
#lp{
height:20px;
width:100%;
background-color:transparent;
top:calc(50% - 10px);
transform:rotate(0deg) !important;
transform-origin:50% 50% !important;
}
#lp > span:nth-child(1){
float:right;
}
#lp > span:nth-child(2){
float:left;
}
#sup{
position:fixed;
height:270px;
width:270px;
background-color:none;
top:calc(50vh - 135px);
left:calc(50vw - 135px);
border-radius:50%;
border-style:solid;
border-width:1px;
}
#sup:nth-child(1) > div{
height:4px;
width:100%;
background-color:white;
position:absolute;
top:calc(50% - 2px);
background-color:none;
border-style:solid;
}
#sup > div{
height:1px;
width:100%;
position:absolute;
top:calc(50% - 0.5px);
background-color:black;
}
#sup > div > span:nth-child(1){
text-align:left;
}
#sup > div > span:nth-child(2){
text-align:right;
}
#sup > div:nth-child(1){
transform:rotate(0deg);
}
#sup > div:nth-child(2){
transform:rotate(30deg);
}
#sup > div:nth-child(3){
transform:rotate(60deg);
}
#sup > div:nth-child(4){
transform:rotate(90deg);
}
#sup > div:nth-child(5){
transform:rotate(120deg);
}
#sup > div:nth-child(6){
transform:rotate(150deg);
}
#sup:nth-child(2){
transform:rotate(6deg) !important;
}
#sup:nth-child(3){
transform:rotate(12deg) !important;
}
#sup:nth-child(4){
transform:rotate(18deg) !important;
}
#sup:nth-child(5){
transform:rotate(24deg) !important;
}
#dt_tm{
height:auto;
width:20%;
box-shadow: 0 0 5px gray;
transform:rotate(0deg) !important;
top:calc(80% - 15px);
left:40%;
text-align:center;
font-size:10px;
font-weight:300;
}
#aud{
display:none;
}
/*loader code -- - - - - - - - - - - - - - */
.loader_container{
position:fixed;
top:0;
left:0;
height:100vh;
width:100vw;
background-color:black;
}
.loader_sub{
height:150px;
width:150px;
background-color:transparent;
margin-top:calc(50vh - 150px);
margin-left:calc(50vw - 75px);
position:relative;
}
.loader_sub > div{
height:5px;
width:150px;
position:absolute;
bottom:0;
border-radius:50px;
animation:animate1 1s ease-out infinite;
background:linear-gradient(90deg, transparent ,#8DF3FF);
background-repeat:no-repeat;
}
.loader_s > div{
height:4px !important;
width:130px !important;
}
#loader_1{
transform-origin:50% 50%;
transform:rotate(180deg);
}
#loader_2{
transform:rotate(-60deg);
transform-origin:0% 50%;
}
#loader_3{
transform:rotate(60deg);
transform-origin:100% 50%;
}
@keyframes animate1{
0%{
background-size:0% 100%;
}
100%{
background-size:100% 100%;
}
}
.loader_text{
height:20px;
width:100vw;
background-color:none;
position:fixed;
margin-top:50px;
text-align:center;
font-size:30px;
letter-spacing:5px;
}
.loader_text::before{
color:white;
content:"Loading";
animation:animate2 2s infinite;
}
@keyframes animate2{
0%{
content:"Loading";
}
25%{
content:"Loading.";
}
50%{
content:"Loading..";
}
75%{
content:"Loading...";
}
100%{
content:"Loading...";
}
}
-----JS------
var d1 = new Object();
var d2 = new Object();
d1 = {
0:'Sun',
1:'Mon',
2:'Tue',
3:'Wed',
4:'Thu',
5:'Fru',
6:'Sat'
}
d2 = {
0:"Jan",
1:"Feb",
2:"March",
3:"April",
4:"May",
5:"June",
6:"July",
7:"Aug",
8:"Sept",
9:"Oct",
10:"Nov",
11:"Dec"
}
window.onload = function(){
Swal.fire({
icon: 'success',
title: 'Wlcome to a clock code\n\nKeep the volume full',
});
document.getElementsByClassName("loader_container")[0].style.display = "none";
}
function fn(){
document.getElementById("aud").play();
strt();
}
/*window.onload = */function strt(){
function ak(){
let hr = document.getElementById("hr");
let min = document.getElementById("min");
let sec = document.getElementById("sec");
var time = new Date();
let sec_ = time.getSeconds();
let min_ = time.getMinutes();
let hr_ = time.getHours();
let dat = time.getDate();
let mon = time.getMonth();
//let yer = d.getFullYear();
let day = time.getDay();
let d_y = d1[day];
let m_n = d2[mon];
hr.style.transform = "rotate("+((hr_*30) + (min_*0.5) - 90)+"deg)";
min.style.transform = "rotate("+(min_*6-90 + sec_*0.1)+"deg)";
sec.style.transform = "rotate("+(sec_*6-90)+"deg)";
document.getElementById("date").innerHTML = dat;
document.getElementById("month").innerHTML = m_n;
document.getElementById("day").innerHTML = d_y;
}
setInterval(ak,1000);
}33. By J Kaur
Made by J Kaur. A very basic clock that has no styling. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
-----CSS------
function printTime() {
var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
secs = (secs < 9) ? "0" + secs : secs;
mins = (mins < 9) ? ("0" + mins) : mins;
document.body.innerHTML = hours+":"+mins+":"+secs;
}
setInterval(printTime, 1000);34. By Satyam Jain
Made by Satyam Jain. Analog clock with basic styling. ( Source )
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400"
style="background-color:#333">
</canvas>
</body>
</html>
-----JS------
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}35. By vaibhav
Made by vaibhav. Analog clock with minimalistic styling. ( Source )
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="clock" content="">
<title>Analog Clock</title>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="outer">
<div class="frame">
<h1 class="mark">12</h1>
<h1 class="mark">09</h1>
<h1 class="mark">03</h1>
<h1 class="mark">06</h1>
<div class="niddles">
<div class="hour_niddle">
</div>
<div class="minute_niddle">
</div>
<div class="second_niddle">
</div>
<div class="center">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
-----CSS------
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 30px;
}
.wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #916241;
}
.outer {
position: absolute;
width: 10rem;
height: 10rem;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.frame {
background: #958368;
height: 100%;
width: 100%;
border-radius: 50%;
background-color: #FFDC89;
position: relative;
box-shadow: 8px -8px 20px 5px #0002,
-8px 8px 20px 5px #0002;
}
.mark {
color: #964842;
font-weight: bold;
position: absolute;
}
.mark:nth-child(1) {
top: 0;
width: 50px;
left: calc(50% - 25px);
}
.mark:nth-child(2) {
width: 50px;
top: calc(50% - 25px);
left: 0;
}
.mark:nth-child(3) {
width: 50px;
top: calc(50% - 25px);
right: 25px;
}
.mark:nth-child(4) {
bottom: 0;
width: 50px;
left: calc(50% - 25px);
}
.niddles {
position: absolute;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.center {
width: 5%;
height: 5%;
background: #964842;
border-radius: 50%;
z-index: 3;
}
.hour_niddle {
height: 15%;
width: 2%;
background: red;
position: absolute;
transform: rotate(90deg);
transform-origin: bottom;
border-radius: 50%;
top: 35%;
z-index: 2;
}
.minute_niddle {
height: 20%;
width: 2%;
background: green;
position: absolute;
transform: rotate(90deg);
transform-origin: bottom;
border-radius: 50%;
top: 30%;
z-index: 1;
}
.second_niddle {
height: 25%;
width: 2%;
background: blue;
position: absolute;
transform: rotate(90deg);
transform-origin: bottom;
border-radius: 50%;
top: 25%;
}
-----JS------
setInterval(timeStart, 1);
function timeStart() {
var date = new Date();
var hours = date.getHours()%12;
var min = date.getMinutes();
var sec = date.getSeconds();
document.querySelector(".hour_niddle").style.transform = "rotate("+hours*30+"deg)";
document.querySelector(".minute_niddle").style.transform = "rotate("+min*6+"deg)";
document.querySelector(".second_niddle").style.transform = "rotate("+sec*6+"deg)";
}36. By Keerthana
Made by Keerthana. Basic analog clock with minimal styling. ( Source )
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>
-----JS------
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, 'maroon');
grad.addColorStop(0.5, 'black');
grad.addColorStop(1, 'black');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = 'maroon';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}37. By Viswanathan
Made by Viswanathan. Digital clock that also shows the date and the day, it uses minimalistic styling. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id = "container">
<div id = "calender">
<span id = "date">date</span>
<span id = "month">month</span>
<span id = "year">year</span>
</div>
<div id = "d">
<span id = "day">day</span>
</div>
<div id = "clock">
<div id = "hours"><span id = "h">00</span></div>
<div id = "minutes"><span id = "m">00</span></div>
<div id = "seconds"><span id = "s">00</span></div>
</div>
</div>
</body>
</html>
-----CSS-----
body {
display:flex;
justify-content:center;
align-items:center;
}
#container{
position:relative;
display:grid;
background-color:#127fd6;
width:400px;
height:300px;
margin-top:25%;
border-radius:10px;
}
#calender{
display:flex;
margin-top:8px;
}
#date{
display:flex;
width:30%;
height:60px;
margin-left:2.5%;
margin-right:2.5%;
justify-content:center;
align-items:center;
font-size:30px;
background-color:#e6c929;
}
#month{
display:flex;
width:30%;
height:60px;
margin-right:2.5%;
justify-content:center;
align-items:center;
font-size:30px;
background-color:#29e6a7;
}
#year{
display:flex;
width:30%;
height:60px;
margin-right:2.5%;
justify-content:center;
align-items:center;
font-size:30px;
background-color:#ad29e6;
}
#d{
display:block;
}
#day{
display:block;
width:40%;
height:30px;
margin-left:30%;
font-size:20px;
background-color:#ff006a;
text-align:center;
border-radius:8px;
color:white;
}
#clock{
display:flex;
}
#hours{
display:flex;
width:30%;
height:80px;
margin-left:2.5%;
margin-right:2.5%;
background-color:#eb7434;
align-items:center;
justify-content:center;
font-size:40px;
}
#minutes{
display:flex;
width:33%;
height:80px;
margin-right:2.5%;
background-color:#95eb34;
align-items:center;
justify-content:center;
font-size:40px;
}
#seconds{
display:flex;
width:33%;
height:80px;
margin-right:2.5%;
background-color:#34c9eb;
align-items:center;
justify-content:center;
font-size:40px;
}
-----JS------
function clock(){
var a = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]
var d = new Date()
var date = document.getElementById("date")
var month = document.getElementById("month")
var year = document.getElementById("year")
var day = document.getElementById("day")
var hours= document.getElementById("h");
var minutes =document.getElementById("m");
var seconds = document.getElementById("s");
date.innerHTML= d.getDate()
month.innerHTML = (d.getMonth()+1)
year.innerHTML = d.getFullYear()
day.innerHTML= a[d.getDay() -1]
hours.innerHTML = d.getHours()
minutes.innerHTML = d.getMinutes()
seconds.innerHTML = d.getSeconds()
}
var interval = setInterval(clock,1000);38. By Person
Made by Person. JavaScript Clock with both analog and digital clock. Uses p5.js. ( Source )
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
<script src="index.js"></script>
</head>
<body>
</body>
</html>
-----JS------
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
ellipseMode(CENTER);
}
function draw() {
background(230);
stroke(249, 79, 164);
noFill();
push();
translate(width/2, height/2);
rotate(360 * (minute()*60+second())/3600)
strokeWeight(5);
fill(255);
ellipse(0, 0, 350, 350);
strokeWeight(3);
stroke(76, 204, 69);
line(0, 0, 0, -160);
pop();
push();
translate(width/2, height/2);
rotate(360 * second()/60);
strokeWeight(3);
stroke(70, 242, 239);
line(0, 0, 0, -170);
pop();
push();
translate(width/2, height/2);
// rotate(hour() * 360/24);
rotate(360 * (hour()*3600+minute()*60+second())/43200);
strokeWeight(3);
stroke(255, 63, 76);
line(0, 0, 0, -120);
pop();
push();
translate(width/2, height/2);
noFill();
strokeWeight(7);
stroke(70, 242, 239);
arc(0, 0, 387, 387, 270, 360 * second()/60 - 90);
stroke(76, 204, 69);
arc(0, 0, 374, 374, 270, 360 * (minute()*60+second())/3600 - 90);
stroke(255, 63, 76);
arc(0, 0, 361, 361, 270, 360 * (hour()*3600+minute()*60+second())/43200 - 90);
pop();
textSize(32);
s = String(second());
m = String(minute());
h = String(hour() % 12);
if (s.length == 1) { s = '0' + s}
if (m.length == 1) { m = '0' + m}
if (hour() > 12) {
time = "PM"
} else {
time = "AM"
}
text(h + ':' + m + ':' + s + " " + time, width/2-70, height/2+50);
}39. By Ahmed Mokhles
Made by Ahmed Mokhles. Minimalistic digital clock with minimal styling. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>My JS Clock</title>
</head>
<body>
<h1 id="text">My JS Clock</h1>
<h1 id="clock"></h1>
</body>
</html>
------CSS------
body {
background-color: #055;
}
#text {
color: #0aa;
text-align: center;
font-family: Florence, cursive;
}
#clock {
color: #0ff;
text-align: center;
font-family: "Courier New", Courier, monospace;
}
-----JS-----
function clock() {
var time = new Date()
var clock = document.getElementById("clock");
clock.innerHTML = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds()
}
setInterval(clock, 10)40. By Harshita Kumari
Made by Harshita Kumari. Simple analog clock. ( Source )
<html>
<head>
<title>Clock</title>
<meta name="viewport" content="width=device-width,
initial-scale=1" /> <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="clock">
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div class="One">1.</div>
<div class="Two">2.</div>
<div class="three">3.</div>
<div class="four">4.</div>
<div class="five">5.</div>
<div class="six">6.</div>
<div class="seven">7.</div>
<div class="eight">8.</div>
<div class="nine">9.</div>
<div class="ten">10.</div>
<div class="eleven">11.</div>
<div class="twelve">12.</div>
<div class="center"></div>
</div> <script type="text/javascript" src="app.js"></script>
</body>
</html>
------CSS-------
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #CC6666;
}
.clock {
height: 300px;
width: 300px;
background-color:#dddddd;
border-radius: 100%;
border:5px
solid black;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.twelve {
position: absolute;
width: 2px;
height: 15px;
left: 0;
top: 0;
right: 40px;
margin: 0 auto;
font-weight:bolder ;
}
.One{
position: absolute;
width: 0px;
height: 15px;
font-weight:bolder ;
left:200;
top: 5;
right: 0;
margin: 20;
}
.Two{
position: absolute;
width: 0px;
height: 15px;
background:#dddddd;
left:250;
top: 60;
right: 0;
margin: 20;
font-weight:bolder ;
}
.three {
position: absolute;
width: 15px;
height: 3px;
font-weight:bolder ;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
}
.four {
position: absolute;
width: 15px;
height: 3px;
top: 120;
bottom: 0;
left:265;
right: 0;
margin: auto 0;
font-weight:bolder ;
}
.five {
position: absolute;
width: 15px;
height: 3px;
top: 220;
bottom: 0;
left:215;
right: 0;
margin: auto 0;
font-weight:bolder ;
}
.six {
position: absolute;
width: 3px;
height: 15px;
background:#dddddd;
left: 0;
top:280px;
bottom: 0;
right: 0;
margin: 0 auto;
font-weight:bolder ;
}
.seven {
position: absolute;
width: 3px;
height: 15px;
top:260;
left:0;
bottom: 0;
right:160;
margin: 0 auto;
font-weight:bolder ;
}
.eight{
position: absolute;
width: 3px;
height: 15px;
top:210;
left:0;
bottom: 0;
right:255;
margin: 0 auto;
font-weight:bolder ;
}
.nine {
position: absolute;
width: 15px;
height: 3px;
top: 0;
bottom: 0;
left: 0;
margin: auto 0;
font-weight:bolder ;
}
.ten{
position:absolute ;
right:280px;
top:80px;
left:15px;
font-weight:bolder ;
}
.eleven{
position:absolute ;
right:215px;
top:25px;
font-weight:bolder ;
}
.center {
width: 10px;
height: 10px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: #000;
border-radius: 100%;
}
#seconds {
position: absolute;
height: 100px;
width: 1px;
left: 0;
right: 0;
bottom: 100px;
top: 0px;
margin: auto;
background:#000; -webkit-transform-origin: bottom;
background: #ff4136;
}
#minutes {
position: absolute;
height: 130px;
width: 2px;
left: 0;
right: 0;
bottom:130px;
top: 0px;
margin: auto;
background:blue;
-webkit-transform-origin: bottom;
}
#hours {
position: absolute;
height: 80px;
width: 6px;
left: 0;
right: 0;
bottom: 80px;
top: 0px;
margin: auto;
background: #000; -webkit-transform-origin: bottom;
}
------JS------
function moveHands() {
with (
new Date())
{
h = 30 * ((getHours() % 12) + getMinutes() / 60);
m = 6 * getMinutes();
s = 6 * getSeconds();
document.getElementById("seconds").style.cssText = "-webkit-transform:rotate(" + s + "deg);";
document.getElementById("minutes").style.cssText = "-webkit-transform:rotate(" + m + "deg);";
document.getElementById("hours").style.cssText = "-webkit-transform:rotate(" + h + "deg);";
setTimeout(moveHands, 1000);
}
}
window.onload = moveHands; 41. By Sirika Lohit
Made by Sirika Lohit. Digital clock that displays time and date, its made by Sirika Lohit but edited by Anchita. Click the button to display the time and date. ( Source )
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Date & Time</title>
</head>
<body>
<p align=“center” class=“fnt”> 💖Created by Sirika Lohit💖<br/>
Just edited by Anchita Sarma😅</p>
<h1 class="style">Clock 🕓</h1>
<button type="button" class="button"
onclick="document.getElementById('date_time').innerHTML = Date()">
Click To get the current Date And Time.😎</button>
<p id="date_time" class="fnt"></p>
<br /><br />
</body>
</html>
-----CSS-----
body {
background-color:pink;
font-family:times new roman;
text-align:center;
}
.style {
padding:10px;
color:red;
font-size:10vw;
}
.button{
background-color:white;
padding:10px;
text-align:right;
}
.fnt {
color:deeppink;
}
.text{
color:white;
} 42. By RO$€☆
Made by RO$€☆. Pendulum clock that has amazing loading and working animation. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Simple Clock</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div class="loader">
<div class="sq"></div>
<div class="sq"></div>
<div class="sq"></div>
</div>
<div class="container">
<div class="star"></div>
<div class="roof1"></div>
<div class="roof2"></div>
<div class="house">
<img class="bird" src="https://www.dropbox.com/s/02wxrrvlk1tn68o/color-hand-paint-watercolor-bird.jpg?dl=1"/>
<div class="circle">
<img class="clock" src="https://www.dropbox.com/s/3mcnql9swwqdc69/cclock.png?dl=1"/>
<div id="h" class="hour hand"></div>
<div id="m" class="minute hand"></div>
<div id="s" class="seconds hand"></div>
</div>
</div>
<div class="pendulum">
<div class="cir">
<div class="star1"></div>
</div>
</div>
</body>
</html>
-----CSS-------
body {
background-color:#0cbaba;
}
.container{
position:absolute;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
top:30%;
left:50%;
}
.star {
width:50px;
height:50px;
background-color: #0d324d;
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
position:absolute ;
top:-35px;
left:75px;
}
.roof1 {
width:10px;
height:190px;
background-color: #7f5a83;
background-image: -o-linear-gradient(135deg, #7f5a83 0%, #0d324d 74%);
background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
-webkit-transform:rotate(41deg);
-ms-transform:rotate(41deg);
transform:rotate(41deg);
position:absolute;
top:-34px;
left:35px;
}
.roof2 {
width:10px;
height:190px;
background-color: #7f5a83;
background-image: -o-linear-gradient(135deg, #7f5a83 0%, #0d324d 74%);
background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
-webkit-transform:rotate(-41deg);
-ms-transform:rotate(-41deg);
transform:rotate(-41deg);
position:absolute ;
top:-34px;
left:155px;
}
.house {
width:200px;
height:300px;
background:#f6f6f6;
-webkit-clip-path: polygon(50% 0%, 100% 38%, 94% 100%, 7% 100%, 0% 38%);
clip-path: polygon(50% 0%, 100% 38%, 94% 100%, 7% 100%, 0% 38%);
}
.bird {
width:150px;
height:200px;
position:absolute;
left:18px;
}
.circle {
width:150px;
height:150px;
border-radius:50%;
background:transparent;
position:absolute;
bottom:10px;
left:25px;
}
.clock {
width:100%;
height:100%;
border-radius:50%;
border:1px solid #7f5a83;
background:transparent;
}
.hand{
background:#222;
position: absolute;
margin: auto;
left: 0;
right: 0;
border-radius:10px;
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transform-origin:bottom;
-ms-transform-origin:bottom;
transform-origin:bottom;
}
.hour{
height: 35px;
width: 4px;
top: 40px;
}
.minute{
height: 40px;
width: 4px;
top: 33px;
}
.seconds{
height: 48px;
width: 2px;
top: 26px;
}
.pendulum {
width:15px;
height:150px;
background-color: #7f5a83;
background-image: -o-linear-gradient(135deg, #7f5a83 0%, #0d324d 74%);
background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
position:absolute;
left:90px;
z-index:-1;
-webkit-transform-origin:top;
-ms-transform-origin:top;
transform-origin:top;
margin-top:-5px;
-webkit-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
transform:rotate(-35deg);
-webkit-animation:move 2s linear infinite alternate;
animation:move 2s linear infinite alternate;
}
@-webkit-keyframes move {
to {
-webkit-transform:rotate(35deg);
transform:rotate(35deg);
}
}
@keyframes move {
to {
-webkit-transform:rotate(35deg);
transform:rotate(35deg);
}
}
.cir {
width:50px;
height:50px;
border-radius:50%;
background:#f6f6f6;
position:absolute;
bottom:-5px;
left:-15px;
}
.star1 {
width:30px;
height:30px;
background-color: #7f5a83;
background-image: -o-linear-gradient(135deg, #7f5a83 0%, #0d324d 74%);
background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
position:absolute;
left:10px;
top:10px;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #eec0c6;
background-image: -o-linear-gradient(135deg, #eec0c6 0%, #7ee8fa 74%);
background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
font-size:50px;
}
.sq {
height: 50px;
width: 50px;
display: inline-block;
background-color: #2a2a72;
background-image: -o-linear-gradient(135deg, #2a2a72 0%, #009ffd 74%);
background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: .6;
-webkit-animation: roll 3s infinite;
animation: roll 3s infinite;
}
@-webkit-keyframes roll {
0% {
-webkit-transform:rotate(0);
transform:rotate(0);
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes roll {
0% {
-webkit-transform:rotate(0);
transform:rotate(0);
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
----JS------
$(window).load(function() {
setInterval(()=>{
let d = new Date();
let h = d.getHours();
let m = d.getMinutes(); let s = d.getSeconds();
let hr = h*(360/12)+m/2;
let min = m*(360/60);
let sec = s*(360/60);
document.getElementById("h").style.transform="rotate("+hr+"deg)";
document.getElementById("m").style.transform="rotate("+min+"deg)";
document.getElementById("s").style.transform="rotate("+sec+"deg)";
},1000);
$(".loader").fadeOut("slow");
});43. By Lego in Motion
Made by Lego in Motion. Simplistic digital clock without any heavy styling. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id = "clock"></div>
</body>
</html>
-----CSS-----
body {
background-color:#222;
}
#clock {
width:96vw;
height:96vw;
background-color:#333;
border-radius:50%;
color:#999;
font-size:250%;
display:flex;
text-align: center;
align-items:center;
justify-content:center;
}
-----JS------
window.onload = () => {
function clockTime() {
//document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds;
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
document.getElementById('clock').innerHTML = hours + ":" + minutes + ":" + seconds;
var timeout = setTimeout(clockTime, 1000);
if (seconds < 10) {
document.getElementById('clock').innerHTML = hours + ":" + minutes + ":0" + seconds;
}
if (hours < 10) {
document.getElementById('clock').innerHTML = "0" + hours + ":" + minutes + ":" + seconds;
}
if (minutes < 10) {
document.getElementById('clock').innerHTML = hours + ":0" + minutes + ":" + seconds;
}
}
clockTime()
}44. By Hansman
Made by Hansman. Digital clock with dark mode button switch the color theme from light to dark. ( Source )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="clock.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="clock.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="times">
<div class="hour"></div>
<p id="dock">:</p>
<div class="minute"></div>
<p id="dock2">:</p>
<div class="second"></div>
</div>
</div>
<div class="turn_on_off">
<i class="fa fa-moon-o" id="moon" onclick="moon_icon()"></i>
<i class="fa fa-sun-o" id="sun" onclick="sun_icon()"></i>
</div>
</div>
<p id="time"></p>
</body>
</html>
------CSS-------
*{
margin: 0;
padding: 0;
}
body{
background-color: rgb(27, 27, 26);
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 300px;
height: 200px;
background-color: rgb(46, 43, 43);
margin: 100px 0px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.times{
display: flex;
align-items: center;
}
.hour{
width: 60px;
height: 140px;
background-color: rgb(65, 57, 57);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.minute{
width: 60px;
height: 140px;
background-color: rgb(65, 57, 57);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.second{
width: 60px;
height: 140px;
background-color: rgb(65, 57, 57);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.times p{
color: white;
font-size: 60px;
}
.turn_on_off{
width: 50px;
height: 50px;
background-color: rgb(65, 57, 57);
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.turn_on_off i{
color: white;
font-size: 30px;
}
#sun{
display: none;
}
-------JS--------
function time() {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
document.querySelector(".hour").innerHTML = hour;
document.querySelector(".minute").innerHTML = minute;
document.querySelector(".second").innerHTML = second;
if (hour < 10) {
document.querySelector(".hour").innerHTML = "0" + hour;
} else if (minute < 10) {
document.querySelector(".minute").innerHTML = "0" + minute;
}
if (second < 10) {
document.querySelector(".second").innerHTML = "0" + second;
}
}
setInterval(time, 100);
function moon_icon() {
document.getElementById("moon").style.display = "none";
document.getElementById("sun").style.display = "block";
document.querySelector(".turn_on_off").style.backgroundColor =
"rgb(185, 170, 170)";
document.querySelector(".container").style.backgroundColor = "white";
document.querySelector(".hour").style.backgroundColor = "rgb(185, 170, 170)";
document.querySelector(".minute").style.backgroundColor =
"rgb(185, 170, 170)";
document.querySelector(".second").style.backgroundColor =
"rgb(185, 170, 170)";
document.querySelector(".hour").style.color = "rgb(65, 57, 57)";
document.querySelector(".minute").style.color = "rgb(65, 57, 57)";
document.querySelector(".second").style.color = "rgb(65, 57, 57)";
document.getElementById("dock").style.color = "rgb(65, 57, 57)";
document.getElementById("dock2").style.color = "rgb(65, 57, 57)";
}
function sun_icon() {
document.getElementById("moon").style.display = "block";
document.getElementById("sun").style.display = "none";
document.querySelector(".container").style.backgroundColor =
"rgb(46, 43, 43)";
document.querySelector(".hour").style.backgroundColor = "rgb(65, 57, 57)";
document.querySelector(".minute").style.backgroundColor = "rgb(65, 57, 57)";
document.querySelector(".second").style.backgroundColor = "rgb(65, 57, 57)";
document.querySelector(".hour").style.color = "white";
document.querySelector(".minute").style.color = "white";
document.querySelector(".second").style.color = "white";
document.getElementById("dock").style.color = "white";
document.getElementById("dock2").style.color = "white";
document.querySelector(".turn_on_off").style.backgroundColor =
"rgb(65, 57, 57)";
}45. By Poorani K
Made by Poorani K. Roman analog clock with cool loading animation. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock</title>
<style></style>
</head>
<body>
<h1>Analog Clock</h1>
<div class="design">
<div class="clock">
<div onload="clock()" style="" id="sec">
</div>
<div onload="clock()" style="" id="min">
</div>
<div onload="clock()" style="" id="hour">
</div>
<div class="cen">
</div>
</div>
</div>
</body>
</html>
-----CSS------
@import url('https://fonts.googleapis.com/css?family=Fahkwang');
body{
background:#000033;
overflow:hidden ;
}
#sec{
width: 2px;
height: 100px;
background:red;
left: 48%;
top: 10%;
position: absolute;
border-radius: 100%;
animation-name:swing;
transform-origin:bottom ;
animation-duration: 1s;
}
#min{
width: 4px;
height: 90px;
background:black;
left:48%;
top:15%;
position: absolute;
border-radius: 100%;
animation-name:swing;
animation-duration: 1s;
transform-origin:bottom ;
}
#hour{
width: 5px;
height:50px;
background:black;
left: 48%;
top: 30%;
border-radius: 100%;
position: absolute;
animation-name:swing;
animation-duration: 1s;
transform-origin:bottom ;
}
.cen{
width: 15px;
height: 15px;
background-color: black;
border-style: solid;
border-color: yellow;
border-radius: 20px;
left:45%;
top: 47%;
position: absolute;
box-shadow:0 0 10px white,
0 0 50px yellow,
0 0 90px yellow;
}
.clock{
background-image: url("http://www.pngmart.com/files/1/Clock-No-Hands-PNG-Clipart.png");
position: absolute;
right:0px;
left: 0px;
top: 3%;
background-size:250px 250px;
width:250px;
height:250px;
background-color:orange;
left:5%;
border-radius:50%;
box-shadow:0 0 80px inset ,
0 0 10px white ,
0 0 50px yellow;
border-width:10px;
border-style:solid ;
border-color:black ;
}
@keyframes swing{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.design{
width:300px;
height:300px;
background:yellow;
border-radius:20%;
box-shadow:0px 0 30px inset ,
0 0px 80px inset,
0 0 100px inset ;
border-style:solid ;
border-color:yellow ;
border-width:5px;
left:7%;
top:30%;
position:absolute ;
}
h1{
text-align:center ;
color:white;
text-shadow:0 0 10px #00ffff,
0 0 30px #00ffff,
0 0 50px #00ffff,
0 0 100px #00ffff;
font-size:50px;
font-family: 'Fahkwang', sans-serif;
}
------JS-------
var tim = setInterval(clock);
function clock(){
var date = new Date();
var sec = date.getSeconds();
var min = date.getMinutes();
var hour = date.getHours();
document.getElementById("hour").style.transform = "rotate(" + hour * 30 + "deg)";
document.getElementById("min").style.transform = "rotate(" + min * 6 + "deg)";
document.getElementById("sec").style.transform = "rotate(" + sec * 6 + "deg)";
}
46. By Vaibhav Singh
Made by Vaibhav Singh. Digital clock with futuristic design. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>J.A.R.V.I.S</title>
</head>
<body>
<div class="title"></div>
<div class="svg-container">
<svg viewBox="0 -10 30 220" preserveAspectRatio>
<defs>
<filter id="neon">
<feFlood flood-color="#3bb4c4" flood-opacity="0.5" in="SourceGraphic" />
<feComposite operator="in" in2="SourceGraphic" />
<feGaussianBlur stdDeviation="15" />
<feComponentTransfer result="glow1">
<feFuncA type="linear" slope="4" intercept="0" />
</feComponentTransfer>
<feMerge>
<feMergeNode in="glow1" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<circle class="circle-96-thin">
</circle>
<circle class="circle-96-thick">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="760 100 100"
to="0 100 100"
dur="6s"
repeatCount="indefinite"
additive="sum"
/>
</circle>
<circle class="circle-88-thin">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 100 100"
to="320 100 100"
dur="2.2s"
repeatCount="indefinite"
additive="sum"
/>
</circle>
<circle class="circle-78-thin">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="720 100 100"
to="0 100 100"
dur="1.2s"
repeatCount="indefinite"/>
</circle>
<circle class="circle-70-thick">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="760 100 100"
to="0 100 100"
dur="15s"
repeatCount="indefinite"
additive="sum"
/>
</circle>
<circle class="circle-55-thin"></circle>
<circle class="circle-55-thick">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="760 100 100"
to="0 100 100"
dur="0.5s"
repeatCount="indefinite"
additive="sum"
/>
</circle>
<circle class="circle-40-thin"></circle>
<circle class="circle-40-thick">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="760 100 100"
to="0 100 100"
dur="0.5s"
repeatCount="indefinite"
additive="sum"
/>
</circle>
<circle class="circle-30-thin"></circle>
<circle class="circle-30-thick">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="760 100 100"
to="0 100 100"
dur="0.5s"
repeatCount="indefinite"
additive="sum"
/>
</circle>
<circle class="circle-15-thin"></circle>
</svg>
</div>
<div class="clock"></div>
</body>
</html>
-----CSS------
:root {
--pi:calc(22 / 7);
--cr:white;
--st:#3bb4c4;
--bg:#0000;
--sg:green;
--ss:#3bb4c4;
--r:red;
--b:blue;
--p:pink;
--pl:purple;
--y:yellow;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Orbitron', sans-serif;
}
body {
background-color:Black;
}
.svg-container {
position: absolute;
top:30%;
left:45%;
width: 80vw;
height: 90vh;
transform: translate(calc(50vw / 2 * -1),calc(50vh / 2* -1));
}
.clock{
font-size: 3em;
line-height: 50vh;
text-align: center;
text-shadow: 0 0 5px var(--cr), 0 0 6px var(--sg), 0 0 10px var(--cr), 0 0 20px var(--ss);
color:var(--cr);
position: relative ;
top: 50%;
left: 25%;
width: 60vw;
height: 10vh;
transform: translate(calc(60vw / 2 * -1),calc(35vh + 10vh / 2* -1));
animation: an 1s infinite alternate;
}
@keyframes an{
0%{
text-shadow: 0 0 5px var(--r), 0 0 6px var(--p), 0 0 10px var(--y), 0 0 20px var(--pl);
}
25%{
text-shadow: 0 0 5px var(--pl), 0 0 6px var(--y), 0 0 10px var(--p), 0 0 20px var(--r);
}
50%{
text-shadow: 0 0 5px var(--y), 0 0 6px var(--r), 0 0 10px var(--p), 0 0 20px var(--pl);
}
75%{
text-shadow: 0 0 5px var(--p), 0 0 6px var(--pl), 0 0 10px var(--r), 0 0 20px var(--y);
}
100%{
text-shadow: 0 0 5px var(--y), 0 0 6px var(--r), 0 0 10px var(--pl), 0 0 20px var(--p);
}
}
.title {
font-size: 2em;
line-height: 10vh;
text-align: center;
text-shadow: 0 0 5px var(--cr), 0 0 6px var(--sg), 0 0 10px var(--cr), 0 0 20px var(--ss);
color:var(--cr);
position: absolute;
top: 15%;
left: 50%;
width: 60vw;
height: 10vh;
transform: translate(calc(60vw / 2 * -1),calc(10vh / 2* -1));
color: var(--cr);
}
svg{
margin: 0 auto;
width: 100%;
height: 100%;
fill: none;
filter:url(#neon);
}
circle {
cx:100;
cy:100;
fill:none;
stroke:var(--st);
}
.circle-96-thin {
r:96;
stroke-width: 1px;
stroke-dasharray:calc(2*var(--pi)*96);
}
.circle-96-thick {
r:118;
stroke-width: 5px;
stroke-dasharray: calc(2*var(--pi)*96*4/100),calc(2*var(--pi)*96*30/100),calc(2*var(--pi)*96*12/100);
}
.circle-88-thin {
r: 108;
stroke-width: 1px;
stroke-dasharray: calc(2*var(--pi)*88 / 5),calc(2*var(--pi)*88 / 5),calc(2*var(--pi)*88 / 5),calc(2*var(--pi)*88);
}
.circle-78-thin {
r: 88;
stroke-width: 0.5px;
stroke-dasharray: calc(2*var(--pi)*78*20/100),calc(2*var(--pi)*78);
}
.circle-70-thick{
r: 80;
stroke-width: 5px;
stroke-dasharray:2;
}
.circle-55-thin {
r: 65;
stroke-width: 1px;
}
.circle-55-thick {
r: 65;
stroke-width: 5px;
stroke-dasharray: calc(2*var(--pi)*55*4/200),calc(2*var(--pi)*55*30/300),calc(2*var(--pi)*55*12/120);
}
.circle-40-thin {
r: 50;
stroke-width: 1px;
}
.circle-40-thick {
r: 40;
stroke-width: 5px;
stroke-dasharray: 25 10;
}
.circle-30-thin {
r: 25;
stroke-width: 1px;
}
.circle-30-thick {
r: 25;
stroke-width: 5px;
stroke-dasharray: 1 1 2 3;
}
.circle-15-thin {
r:15;
stroke-width: 1px;
fill:var(--st);
}
-------JS--------
window.addEventListener("DOMContentLoaded",()=>{
(function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.querySelector('.clock').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
})();
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
});47. By Piyush A. Mulatkar
Made by Piyush A. Mulatkar. Indian Independence day themed digital clock that also displays the current date and day. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>India Themed Clock</title>
</head>
<body>
<div id="clk">
<div id="day">
</div>
<div id="date">
</div>
<div id ="time">
</div>
</div>
<div class ="Ind">
<h1 id="a">Happy </h1>
<h1 id="b">Independence</h1>
<h1 id="c">Day</h1>
</div>
</body>
</html>
------CSS------
body {
background:black;
padding:0;
}
#clk{
color:white;
text-align:center;
font-size:40px;
border:5px double orange;
font-weight:bold;
margin-top:20%;
padding:0;
}
.Ind{
text-align:center;
margin:0;
padding:0;
}
#date{
color:lightgreen;
}
#a{
color:orange;
margin:0;
}
#b{
color:white;
margin:0;
}
#c{
color:lightgreen;
margin:0;
}
-------JS-------
var days=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var months =["January","February","March","April","May","June","July","August","September","November","December"]
//Edit: added 0 funct to add zero before single digit in time
function zero(x){
if(x<10){
return "0" + String(x);
}
else
return x;
}
function isZero(x){
if(x == 0)
{
return 7;
}
else
{
return x;
}
}
function clock(){
var dt = new Date();
var a = zero(dt.getHours());
var b = zero(dt.getMinutes());
var c = zero(dt.getSeconds());
var d = dt.getFullYear()
var e = dt.getMonth();
var f = dt.getDate();
var g = isZero(dt.getDay());
var X = document.getElementById('day');
X.innerHTML = days[g-1];
var Y = document.getElementById('date');
Y.innerHTML = f+ "-" +months[e]+ "-" +d;
var Z = document.getElementById('time');
Z.innerHTML = a + ":" + b +":" + c ;
}
setInterval(clock,1000);48. By Shivam Sharma
Made by Shivam Sharma. Digital JavaScript clock with milliseconds, also shows you the current date and day. ( Source )
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Clock</title>
</head>
<body class="flex">
<h1 id="heading">Clock</h1>
<div class="flex" id="clock">
<span>
<span id="zone">AM</span>
<span id="hr">00</span>:
<span id="min">00</span>:
<span id="sec">00</span>
<span id="ms">00</span>
<span id="date">date</span>
</span>
</div>
</body>
</html>
-------CSS--------
*{
box-sizing:border-box ;
margin:0;
padding:0;
outline:none ;
user-select:none ;
}
body {
background-color:whitesmoke;
width:100%;
height:100vh;
}
.flex{
display:flex;
justify-content:center ;
align-items:center ;
}
#heading{
position:fixed ;
top:0;
font-variant:small-caps ;
color:purple;
width:100%;
text-align:center ;
font-size:2.5rem;
font-weight:700;
padding:1rem 0;
z-index:1;
font-family:monospace;
text-decoration:underline ;
}
#clock{
border:10px solid teal;
width:300px;
border-radius:50%;
height:300px;
font-size:3rem;
font-family:lucida;
background-color:whitesmoke;
box-shadow:1px 2px 10px black,-1px -1px 10px grey;
border-right-color:red;
border-left-color:red;
flex-direction:column;
position:relative ;
}
#ms{
font-size:1rem;
padding-top:1rem;
}
#date{
font-size:1rem;
position:absolute ;
top:75%;
left:50%;
transform:translate(-50%,-50%);
}
#zone{
position:absolute;
top:25%;
left:50%;
transform:translate(-50%,-50%);
font-size:1rem;
}
------JS------
const day=["sun","Mon","Tue","Wed","Thu","Fri","Sat"];
const month=["Jan","Feb","mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
const z=["AM","PM"];
window.onload=()=>{
let interval=setInterval(()=>{
document.getElementById("min").innerHTML=addZero((new Date()).getMinutes());
document.getElementById("sec").innerHTML= addZero((new Date()).getSeconds());
document.getElementById("ms").innerHTML=":" + addZero((((new Date()).getMilliseconds()).toString()).slice(0,2));
document.getElementById("hr").innerHTML=addZero(hours((new Date()).getHours()));
document.getElementById('zone').innerHTML = z[meridian((new Date()).getHours())]; document.getElementById("date").innerHTML=day[(new Date()).getDay()] + ", " +month[(new Date()).getMonth()] +" " +addZero((new Date()).getDate()) +" " +(new Date()).getFullYear();
},10)
}
function addZero(value){
if(value>9){
return value ;
}
if(value == undefined){
return 12;
}
return "0" + value ;
}
function hours(value ){
if(value >12){
return value - 12;
}
return value ;
}
function meridian(value ){
if(value >12){
return 1;
}
return 0;
}49. By Anash Hossain
Made by Anash Hossain. Simple digital clock with minimum styling. ( Source )
<!DOCTYPE html>
<html>
<body>
<marquee direction="left">
Thanks for watching.
Leave a like please.
</marquee>
<center><p id="demo"></p></center>
<h2>Made by <a href="www.facebook.com/anash.bd">Anash Hossain</h2>
</body>
</html>
------CSS------
body {
background-color:grey;
font-size: 30px;
}
p {
color:white;
font-size:50px;
border: 5px groove white;
background-color:black;
border-radius:15px;
}
h2 {
text-align:center;
font-size:25px;
}
marquee {
color:White;
}
------JS-------
var myVar = setInterval(myTimer ,1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}50. By Vikash Pal
Made by Vikash Pal. ( Source )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title>Page Title</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
canvas { display: block; }
</style>
</head>
<body bgcolor="#000">
<canvas id="clock"></canvas>
</body>
</html>
-----CSS-----
var canvas, ctx, cw, ch, s1, m1, h1;
var dt = (2*Math.PI)/60, dh = (2*Math.PI)/24;
window.onload = function(e){
initCanvas();
fillCanvas("#000");
requestAnimationFrame(updateCanvas);
s1 = new Circle(cw/2, ch/2, cw*0.2, {
fill: "#ff6500",
moveToCenter: true,
closePath: true
});
m1 = new Circle(cw/2, ch/2, cw*0.3, {
stroke: "#00df00",
lineWidth: 8
});
h1 = new Circle(cw/2, ch/2, cw*0.4, {
stroke: "#23c7ff",
lineWidth: 8
});
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
s1.draw(dt*s);
m1.draw(dt*m);
h1.draw(dh*h);
};
function initCanvas(){
canvas = document.getElementById("clock");
ctx = canvas.getContext("2d");
cw = canvas.width = window.innerWidth;
ch = canvas.height = window.innerHeight;
}
function fillCanvas(color){
ctx.fillStyle = color;
ctx.fillRect(0, 0, cw, ch);
}
function clearCanvas(){
ctx.clearRect(0, 0, cw, ch);
}
function updateCanvas(){
requestAnimationFrame(updateCanvas);
clearCanvas();
fillCanvas("#000");
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
s1.draw(dt*s);
m1.draw(dt*m);
h1.draw(dh*h);
}
/*
var options = {
fill: "#000",
stroke: "#23c7ff",
lineWidth: "4",
moveToCenter: false,
closePath: false,
};
*/
function Circle(x, y, r, options){
this.x = x;
this.y = y;
this.r = r;
this.theta = 0;
this.options = options;
}
Circle.prototype.draw = function(theta){
ctx.fillStyle = this.options.fill || "#000";
ctx.strokeStyle = this.options.stroke || "#000";
ctx.lineWidth = this.options.lineWidth;
this.theta = theta || 0; // theta required.
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(-Math.PI/2);
ctx.beginPath();
if(this.options.moveToCenter) ctx.moveTo(0, 0);
ctx.arc(0, 0, this.r, 0, this.theta, false);
if(this.options.closePath) ctx.closePath();
if(this.options.fill) ctx.fill();
if(this.options.stroke) ctx.stroke();
ctx.restore();
};51. By Slava
Made by Slava. Digital clock with very minimum styling. ( Source )
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="start()">
<div id="clock"></div>
</body>
</html>
------CSS------
#clock {
color: #000;
font-family: "Courier New", Courier, monospace;
font-size: 3.5em;
text-shadow: 0 0 3px #000000;
text-align: center;
margin-top:200px;
}
-----JS------
function start() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = correctTime(m);
s = correctTime(s);
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(start, 1000);
}
function correctTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}52. By lolo
Made by lolo. Clock with both digital and analog time. It also displays the date. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Clock JS</title>
</head>
<body>
<span id="Fps"></span>
<canvas id="canvas"></canvas>
</body>
</html>
------CSS------
body {
background-color:black;
padding:0;margin:0;
overflow:hidden;
}
#Fps {
position: absolute;
top: 15px;
left: 10px;
color: #f00;
}
-----JS------
"use strict";
let c, ctx, W, H, lastTimeCalled, fps, getDate, year, month, date, hours ,mins, secs;
let radHours = 100;
let radMins = 120;
let radSecs = 140;
window.onload = () => {
c = document.getElementById("canvas");
ctx = c.getContext("2d");
W = c.width = window.innerWidth;
H = c.height = window.innerHeight;
fps = document.getElementById("Fps");
animate();
};
const animate = () => {
clear();
calcFPS();
displayTime();
displayInfo();
displayAnimeTime();
window.requestAnimationFrame(animate);
};
const clear = () => ctx.clearRect(0,0,W,H);
const calcFPS = () => {
let timeDiff = Date.now() - lastTimeCalled;
lastTimeCalled = Date.now();
fps.innerText = "fps: " + Math.round(1000/timeDiff);
};
const displayInfo = () => {
//display border
ctx.lineWidth = 1;
ctx.beginPath();
ctx.strokeStyle = "white";
ctx.arc(W/2, H/2, 152, 0, 2 * Math.PI);
ctx.stroke();
//display hours position
for(let m=1; m<=12; m++){
let angle = 6.28/12*(m-15);
let posX = W/2+(165*Math.cos(angle));
let posY = H/2+(165*Math.sin(angle));
ctx.font = '15px serif';
ctx.fillText(m, posX, posY);
}
//display dots hours position
for(let n=0; n<60; n+=5){
let angle = 6.28/60*(n-15)
let posX = W/2+(152*Math.cos(angle));
let posY = H/2+(152*Math.sin(angle));
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(posX, posY, 2, 0, 2 * Math.PI);
ctx.fill();
}
};
const displayTime = () => {
let months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
getDate = new Date();
hours = getDate.getHours();
mins = getDate.getMinutes();
secs = getDate.getSeconds();
month = getDate.getMonth();
date = getDate.getDate();
year = getDate.getFullYear();
if (hours<10) hours = "0" + hours;
if (mins<10) mins = "0" + mins;
if (secs<10) secs = "0" + secs;
//display hours
ctx.fillStyle = 'white';
ctx.font = '40px serif';
ctx.textBaseline = 'middle';
ctx.textAlign = "center";
ctx.fillText(hours + ":" + mins + ":" + secs, W/2, H/2);
//display date
ctx.fillStyle = 'white';
ctx.font = '15px serif';
ctx.fillText(months[month] + " " + date + ", " + year, W/2, H/2+40);
};
const displayAnimeTime = () => {
//draw secs
for(let i=0; i<=secs; i++){
let angle = 6.28/60*(i-15);
let posX = W/2+(radSecs*Math.cos(angle));
let posY = H/2+(radSecs*Math.sin(angle));
ctx.font = '12px serif';
ctx.fillText("🌸", posX, posY);
}
//darw mins
for(let j=0; j<=mins; j++){
let angle = 6.28/60*(j-15);
let posX = W/2+(radMins*Math.cos(angle));
let posY = H/2+(radMins*Math.sin(angle));
ctx.font = '10px serif';
ctx.fillText("🍀", posX, posY);
}
//darw hours
let temp1 = mins/60;
let temp2 = (hours<=12)?(parseInt(hours)+temp1)/12*60:(hours+temp1-12)/12*60;
for(let k=0; k<=temp2; k++){
let angle = 6.28/60*(k-15);
let posX = W/2+(radHours*Math.cos(angle));
let posY = H/2+(radHours*Math.sin(angle));
ctx.font = '10px serif';
ctx.fillText("🌹", posX, posY);
}
};53. By Aanisha Bhattacharyya
Made by Aanisha Bhattacharyya. Calendar themed digital clock with date and day. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body onload="printTime()">
<div id="box">
<div id="m">
<p id="date" align="center"></p>
</div>
<p id="time"></p>
</div>
</body>
</html>
------CSS-------
body
{
background-color:black;
}
#time
{
font-size:15vw;
position:relative ;
text-align:center;
}
#date
{
font-size:5vw;
color:white; transform:translate(-50%,-50%);
top: 50%;
left: 50%;
margin:auto;
position:relative ;
text-align:center;
font-family:Comic Sans MS;
}
#box
{
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid #BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
position:fixed;
top: 50%;
left: 50%;
margin:auto;
transform:translate(-50%,-50%) rotate(7deg);
}
#m
{
background-color:#6f9008;
height:25vw;
}
-----JS-------
function printTime() {
var d = new Date();
var yr=d.getFullYear();
var n=d.getMonth();
var mn=["January","February","March","April","May","June","July","August","September","October","November","December"];
var mon=mn[n];
var hrs = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var da=d.getDate();
var dayo=d.getDay();
var days=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Friday","Saturday"];
var day=days[dayo];
if(parseInt(s)<10)
{
s="0"+s;
}
if(parseInt(m)<10)
{
m="0"+m;
}
if(parseInt(hrs)<10)
{
hrs="0"+hrs;
}
if(parseInt(da)<10)
{
da="0"+da;
} document.getElementById("time").innerHTML = hrs+":"+m+":"+s;
document.getElementById("date").innerHTML=da+" "+mon+" "+yr+","+day;
}
setInterval(printTime, 1000);54. By Eknoor Singh
Made by Eknoor Singh. Basic digital clock made without any html. ( Source )
body{
background-color:lightgreen;
text-align:center;
font-size:70px;
text-shadow:blue 5px 5px 5px;
}
------JS-------
function printTime() {
var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
document.body.innerHTML = hours+":"+mins+":"+secs;
}
setInterval(printTime, 1000);
alert(printTime)55. By Adil
Made by Adil. Digital clock with date and day, also has dark mode and light mode theme. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Clock</title>
</head>
<body id="body">
<div class="main1" id="main1">
<input type="button" value="Dark" id="change11" class="change" onclick="darkTheme1()">
<input type="button" value="Light" id="change12" class="change2" onclick="lightTheme1()">
<p class="t" id="t">0:0:0:0:0</p>
<input type="button" id="button1" class="button" onclick="main()" value="Start">
<input type="button" id="button2" class="button" onclick="stop()" value="Pause">
<input type="button" id="button3" class="button" onclick="end()" value="Reset">
<p class="creator" id="creator1">Made By: Adil Ali</p>
</div>
<div class="main2" id="main2">
<input type="button" value="Dark" id="change21" class="change" onclick="darkTheme2()">
<input type="button" value="Light" id="change22" class="change2" onclick="lightTheme2()">
<p class="time" id="time"></p>
<p class="creator" id="creator2">Made By: Adil Ali</p>
</div>
<div>
<button id="b1" class="b" onclick="home(), lightTheme2()"><img src= "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_home_48px-512.png" class="img" id="img1"></button>
<button id="b2" class="b" onclick="stopwatch(), lightTheme1()"><img src= "https://image.flaticon.com/icons/png/512/31/31048.png" class="img" id="img2"></button>
</div>
</body>
</html>
------CSS------
body {
background: white;
text-align: center;
margin: 0px;
}
.main1 {
text-align: center;
margn: 0px;
width: 100%;
display: none;
}
.main2 {
text-align: center;
margin: 0px;
width: 100%;
}
.change {
font-size: 30px;
font-family: "Courier New", Courier, monospace;
color: black;
font-weight: bold;
border: 5px solid black;
background-color: white;
float: left;
}
.change2 {
font-size: 30px;
font-family: "Courier New", Courier, monospace;
color: black;
font-weight: bold;
border: 5px solid black;
background-color: white;
float: right;
}
.button {
font-size: 25px;
font-family: "Courier New", Courier, monospace;
color: black;
font-weight: bold;
border: 5px solid black;
background-color: white;
}
.t {
font-size: 35px;
font-family: "Courier New", Courier, monospace;
color: black;
border: 5px solid black;
font-weight: bold;
padding-top: 2%;
}
.time {
font-size: 35px;
font-family: "Courier New", Courier, monospace;
color: black;
font-weight: bold;
border: 5px solid black;
padding-top: 2%;
}
#creator1 {
font-size: 25px;
padding-top: 15%;
color: black;
}
#creator2 {
font-size: 25px;
padding-top: 18%;
color: black;
}
.b {
color: black;
background-color: white;
height: 35px;
width: 49%;
border: 2px solid black;
padding: 0px;
}
.img {
width: 25px;
}
------JS-------
"use strict";
function clock() {
var main = new Date();
var day = main.getDay();
var date = main.getDate();
var month = main.getMonth() + 1;
var year = main.getFullYear();
var hours = main.getHours();
var minutes = main.getMinutes();
var seconds = main.getSeconds();
if (seconds < 10) {
seconds = "0" + seconds;
}
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (date < 10) {
date = "0" + date;
}
switch (day) {
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
case 0:
day = "Sunday";
break;
default:
day = day;
}
switch (month) {
case 1:
month = "January";
break;
case 2:
month = "February";
break;
case 3:
month = "March";
break;
case 4:
month = "April";
break;
case 5:
month = "May";
break;
case 6:
month = "June";
break;
case 7:
month = "July";
break;
case 8:
month = "August";
break;
case 9:
month = "September";
break;
case 10:
month = "October";
break;
case 11:
month = "November";
break;
case 12:
month = "December";
break;
default:
month = month;
}
document.getElementById("time").innerHTML = day + ", " + month + " " + date + ", " + year + "<br/>" + hours + ":" + minutes + ":" + seconds
}
setTimeout(clock, 1);
setInterval(clock, 1000);
var s = Number(0);
var ms = Number(0);
var m = Number(0);
var h = Number(0);
var d = Number(0);
var jh;
function main() {
function start() {
ms = ms + Number(4);
if (ms === 1000) {
ms = 0;
s = s + Number(1);
}
if(s === 60) {
s = 0;
m = m + Number(1);
}
if(m === 60) {
m = 0;
h = h + Number(1);
}
if(h === 24) {
h = 0;
d = d + Number(1);
}
document.getElementById("t").innerHTML = d + ":" + h + ":" + m + ":" + s + ":" + ms;
}
jh = setInterval(start, 1);
}
function stop() {
clearInterval(jh);
}
function end() {
ms = 0;
s = 0;
m = 0;
h = 0;
d = 0;
document.getElementById("t").innerHTML = d + ":" + h + ":" + m + ":" + s + ":" + ms;
clearInterval(jh);
}
function darkTheme1() {
body.style.backgroundColor = "black";
change11.style.backgroundColor = "black";
change11.style.color = "white";
change11.style.borderColor = "white";
change12.style.backgroundColor = "black";
change12.style.color = "white";
change12.style.borderColor = "white";
button1.style.backgroundColor = "black";
button1.style.color = "white";
button1.style.borderColor = "white";
button2.style.backgroundColor = "black";
button2.style.color = "white";
button2.style.borderColor = "white";
button3.style.backgroundColor = "black";
button3.style.color = "white";
button3.style.borderColor = "white";
b1.style.backgroundColor = "black";
b1.style.color = "white";
b1.style.borderColor = "white";
b2.style.backgroundColor = "black";
b2.style.color = "white";
b2.style.borderColor = "white";
t.style.color = "white";
t.style.borderColor = "white";
creator1.style.color = "white";
img1.style.filter = "invert(100%)";
img2.style.filter = "invert(100%)";
}
function darkTheme2() {
body.style.backgroundColor = "black";
change21.style.backgroundColor = "black";
change21.style.color = "white";
change21.style.borderColor = "white";
change22.style.backgroundColor = "black";
change22.style.color = "white";
change22.style.borderColor = "white";
b1.style.backgroundColor = "black";
b1.style.color = "white";
b1.style.borderColor = "white";
b2.style.backgroundColor = "black";
b2.style.color = "white";
b2.style.borderColor = "white";
time.style.color = "white";
time.style.borderColor = "white";
creator2.style.color = "white";
img1.style.filter = "invert(100%)";
img2.style.filter = "invert(100%)";
}
function lightTheme1() {
body.style.backgroundColor = "white";
change11.style.backgroundColor = "white";
change11.style.color = "black";
change11.style.borderColor = "black";
change12.style.backgroundColor = "white";
change12.style.color = "black";
change12.style.borderColor = "black";
button1.style.backgroundColor = "white";
button1.style.color = "black";
button1.style.borderColor = "black";
button2.style.backgroundColor = "white";
button2.style.color = "black";
button2.style.borderColor = "black";
button3.style.backgroundColor = "white";
button3.style.color = "black";
button3.style.borderColor = "black";
t.style.color = "black";
t.style.borderColor = "black";
creator1.style.color = "black";
b1.style.backgroundColor = "white";
b1.style.color = "black";
b1.style.borderColor = "black";
b2.style.backgroundColor = "white";
b2.style.color = "black";
b2.style.borderColor = "black";
img1.style.filter = "invert(0%)";
img2.style.filter = "invert(0%)";
}
function lightTheme2() {
body.style.backgroundColor = "white";
change21.style.backgroundColor = "white";
change21.style.color = "black";
change21.style.borderColor = "black";
change22.style.backgroundColor = "white";
change22.style.color = "black";
change22.style.borderColor = "black";
time.style.color = "black";
time.style.borderColor = "black";
creator2.style.color = "black";
b1.style.backgroundColor = "white";
b1.style.color = "black";
b1.style.borderColor = "black";
b2.style.backgroundColor = "white";
b2.style.color = "black";
b2.style.borderColor = "black";
img1.style.filter = "invert(0%)";
img2.style.filter = "invert(0%)";
}
function home(){
main1.style.display = "none";
main2.style.display = "block";
}
function stopwatch(){
main1.style.display = "block";
main2.style.display = "none";
}56. By Vap
Made by Vap. Very basic digital react clock. ( Source )
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>React Clock</title>
</head>
<body class="d-flex justify-content-center align-items-center bg-info m-0 vh-100 overflow-hidden">
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</body>
</html>
------JS-------
let rootElem = document.querySelector('#app');
let { Component, Fragment } = React;
class Clock extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
}
// carefully
static defaultProps = {
question: "What time is it now?"
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<Fragment>
<p className="h2">
{this.props.question}
</p>
<p className="h3">
{this.state.date.toLocaleTimeString()}
</p>
</Fragment>
);
}
}
class Wrapper extends Component {
constructor(props) {
super(props);
}
render() {
return (
<section
className="text-center text-warning"
>
<Clock />
{/*<Clock question="What the hell is time now!?" />*/}
</section>
);
}
}
// Preferred (you still need prop-types...)
// "The propTypes typechecking happens after defaultProps are resolved, so typechecking will also apply to the defaultProps."
/*
Clock.defaultProps = {
question: "What time is it now?"
};
*/
ReactDOM.render(
<Wrapper />, rootElem);
57. By Madhav
Made by Madhav. Basic digital clock with a preloader screen. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Simple Clock</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body onload="time()">
<!-- Loader -->
<div id="cont">
<div class = "loader" >
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<br><br><br>
Loading....
</div>
</div>
<!-- Clock -->
<div id="clock" >
<div id="hour"></div>
<div id="minute"></div>
<div id="day"></div>
<div id="date"></div>
<div id="month"></div>
</div>
</body>
</html>
------CSS-------
body
{
width: 100vw;
height: 100vh;
display: flex;
position: absolute;
margin: 0; padding:0;
font-family: 'Orbitron', sans-serif;
background-image:url("https://dl.dropbox.com/s/0zthqt8ckhekwow/stary_sky.jpg?dl=0");
background-size:220%;
user-select:none;
}
.loader
{ display:block;
margin-top:60%; margin-left:38%;
}
#cont
{ display:block ; color:white;
position:fixed ;
background-color: #2c3e50;
height:100%; width:100%;
transition-delay:1s;
}
.loader span
{ display:inline-block;
height:35px; width:10px;
background-color:#fff;
margin:1px;
transform:scaleY(1);
animation:load .9s ease-in-out infinite;
}
.loader span:nth-child(2)
{
animation-delay:.09s;
}
.loader span:nth-child(3)
{
animation-delay:.18s;
}
.loader span:nth-child(4)
{
animation-delay:.27s;
}
.loader span:nth-child(5)
{
animation-delay:.36s;
}
#clock
{ margin:auto;
color:white;
font-weight:none;
font-variant-numeric:tabular-nums;
}
#hour,#minute
{ font-size:50px; margin:auto;
display:block ; margin-left:30%;
}
#day,#date,#month
{
display:inline-block;
font-size:100%;
}
@keyframes load
{
0%
{
transform:scale(1);
}
25%
{
transform:scale(1,2.5);
}
50%
{
transform:scaleY(1);
}
}
@media only screen and ( min-width:500px )
{
.loader
{
margin-top:20%; margin-left:41%;
}
}
-------JS---------
//array for days
var days =
[
"Sun","Mon","Tue",
"Wed","Thur","Fri","Sat"
];
//array for months
var months =
[
"January","February","March",
"April","May","June","July",
"August","September","October",
"November","December",
];
//our main function
function time()
{
//to hide the loading window
document.getElementById("cont").style.visibility="hidden";
//To get date and stuff
var d= new Date();
var H=d.getHours();
var M=d.getMinutes();
var D=d.getDay();
var MN=d.getMonth();
var DT=d.getDate();
//to output all info
document.getElementById("hour").innerHTML=H;
document.getElementById("minute").innerHTML=M;
document.getElementById("day").innerHTML=days[D] + " ,";
document.getElementById("date").innerHTML=DT; document.getElementById("month").innerHTML=months[MN];
//Some extra stuffs i.e to add zero to single digit
if(H<10)
{
document.getElementById("hour").innerHTML="0"+H;
}
if(M<10)
{
document.getElementById("minute").innerHTML="0"+M;
}
if(DT<10)
{
document.getElementById("date").innerHTML="0"+DT;
}
//to repeat
setTimeout(time,1000);
}
58. By 丹ⓨㄩک廾
Made by 丹ⓨㄩک廾. Digital clock with cool animation, it also shows the date. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
</head>
<body>
<embed id="ak" src="https://www.dropbox.com/s/2fh4117w8021h67/SadMusic2018-12-29_-_Cold_Isolation_-_David_Fesliyan.mp3?raw=1" loop="infinite" autostart="true" >
</embed>
<p>
The every movement you are observing here along with blinking time will never come in your whole life once again ....
<hr style="width:70%;" color="red">
</p>
<div id="time"></div><br><br><br>
<div class="container">
<div id="more"></div>
</div>
</body>
</html>
-------CSS--------
body {
background-color:black;
border-style:double;
border-width:10px;
background-repeat:no-repeat;
animation-name:blink;
animation-duration:1s;
animation-iteration-count:infinite;
}
#ak{
visibility:hidden;
position:absolute;
}
p{
font-size:20px;
color:red;
text-align:center;
font-family:cursive;
}
@keyframes blink {
from{
border-color:#8DF3FF;
}
to {
border-left-color:none;
}
}
#time{
background-color:none;
height:34px;
width:65%;
text-align:center;
margin:0 auto;
animation-name:ty;
animation-duration:1s;
margin-top:42%;
font-size:25px;
animation-iteration-count:infinite;
border-style:solid;
border-radius:20px;
color:#8DF3FF;
font-family:'Orbitron', sans-serif;
}
@keyframes ty{
0%{
transform:scale(1);
opacity:1;
}
100%{
transform:scale(1.2);
opacity:0;
}
}
#more{
background-color:black;
height:80px;
width:99%;
text-align:center;
color:red;
margin:0 auto;
font-size:30px;
}
.container{
width:65%;
height:80px;
margin:0 auto;
margin-bottom:7%;
animation-name:li;
animation-duration:1s;
animation-iteration-count:infinite;
background:linear-gradient(black,#8DF3FF);
background-repeat:no-repeat;
}
@keyframes li{
0%{
background-size:100% 0%;
}
5%{
background-size:100% 5%;
}
10%{
background-size:100% 10%;
}
15%{
background-size:100% 15%;
}
20%{
background-size:100% 20%;
}
25%{
background-size:100% 25%;
}
30%{
background-size:100% 30%;
}
35%{
background-size:100% 35%;
}
40%{
background-size:100% 40%;
}
45%{
background-size:100% 45%;
}
50%{
background-size:100% 50%;
}
55%{
background-size:100% 55%;
}
60%{
background-size:100% 60%;
}
65%{
background-size:100% 65%;
}
70%{
background-size:100% 70%;
}
75%{
background-size:100% 75%;
}
80%{
background-size:100% 80%;
}
85%{
background-size:100% 85%;
}
90%{
background-size:100% 90%;
}
95%{
background-size:100% 95%;
}
100%{
background-size:100% 100%;
}
}
-------JS-------
window.onload = function (){
time();
}
var d1 = new Object();
var d2 = new Object();
d1 = {
0:'SUNDAY',
1:'MONDAY',
2:'TUESDAY',
3:'WEDNESDAY',
4:'THURSDAY',
5:'FRIDAY',
6:'SATURDAY'
}
d2 = {
0:"January",
1:"February",
2:"March",
3:"April",
4:"May",
5:"June",
6:"July",
7:"August",
8:"September",
9:"October",
10:"November",
11:"December"
}
function time(){
var d = new Date();
var sec = d.getSeconds();
var min = d.getMinutes();
var hor = d.getHours();
var dat = d.getDate();
var mon = d.getMonth();
var yer = d.getFullYear();
var day = d.getDay();
var d_y = d1[day];
var m_n = d2[mon];
if (sec<10){
sec = "0"+sec;
}
if (min<10){
min = "0"+min;
}
if (hor>12){
hor = hor -12 ;
if (hor<10){
hor = "0"+hor;
}
var a_p = "PM"
}
else {
var a_p = "AM";
if(hor<10){
hor = "0"+hor;
}
}
document.getElementById("time").innerHTML=hor+":"+min+":"+sec+" "+a_p;
document.getElementById("more").innerHTML=dat+" "+m_n+" "+yer+"<br/>"+d_y
}
setInterval(time,1000);59. By vizznet
Made by vizznet. Clock with both analog and digital clock, displays the ist time. ( Source )
<!DOCTYPE html>
<html>
<head>
</head>
<!-- this clock is not made for pc -->
<body onload="start()">
<h1><b><p align="center"></p></b></h1><b><h4> <canvas id="canvas" width="350" height="190px"></canvas>
<div align="center"></div></b></h4><br />
<!-- date (Script) -->
<i><b><p id="date"></p></b></i>
<script>
document.getElementById("date").innerHTML = Date();
</script>
</body>
</html>
-------CSS-------
#date{
position: fixed;
color: black;
font-size: 17px;
font-family: "Courier New", Courier, monospace;
font-style: ;
top: 220px;
left: 35px;
opacity: 55%;
}
html{
}
/* Background */
body{
background-image: url(https://66.media.tumblr.com/cea39a42caf93deb5abb4e57d2737439/tumblr_okbew8zrNI1qbg3s6o2_250.png);
height: 700px;
background-repeat: repeat;
background-size: 110%;
position: relative;
height: 150%;
}
/* clock */
#canvas{
position:absolute;
}
-------JS--------
alert("New Clock UPDATE: Date(Year/Month/Day) + Transparent Canvas background.")
var ctx;
var date;
var size = 86.9;
function start()
{
var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
showTime();
//call the function every second
setInterval(showTime, 1000);
}
function showTime()
{
//clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//get the date
date = new Date();
//draw the clock
drawClock();
//show the time
showSeconds();
showMinutes();
showHours();
}
function drawClock()
{
//draw the hour marks
for (var i = 0; i < 12; i++) {
var angle = (i - 3) * (Math.PI * 2) / 12;
ctx.lineWidth = 2;
ctx.beginPath();
var x1 = (canvas.width / 2) + Math.cos(angle) * (size);
var y1 = (canvas.height / 2) + Math.sin(angle) * (size);
var x2 = (canvas.width / 2) + Math.cos(angle) * (size - (size / 7));
var y2 = (canvas.height / 2) + Math.sin(angle) * (size - (size / 7));
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#000';
ctx.stroke();
}
//draw the second marks
for (i = 0; i < 60; i++) {
angle = (i - 3) * (Math.PI * 2) / 60;
ctx.lineWidth = 1;
ctx.beginPath();
x1 = (canvas.width / 2) + Math.cos(angle) * (size);
y1 = (canvas.height / 2) + Math.sin(angle) * (size);
x2 = (canvas.width / 2) + Math.cos(angle) * (size - (size / 30));
y2 = (canvas.height / 2) + Math.sin(angle) * (size - (size / 30));
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#000';
ctx.stroke();
}
}
function showSeconds()
{
var sec = date.getSeconds();
var angle = ((Math.PI * 2) * (sec / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * size), canvas.height / 2 + Math.sin(angle) * size);
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo((canvas.width / 2 - Math.cos(angle) * 20), canvas.height / 2 - Math.sin(angle) * 20);
ctx.strokeStyle = '#e10600';
ctx.stroke();
}
function showMinutes()
{
var min = date.getMinutes();
var angle = ((Math.PI * 2) * (min / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * size / 1.1),
canvas.height / 2 + Math.sin(angle) * size / 1.1);
ctx.strokeStyle = '#000';
ctx.stroke();
}
function showHours()
{
var hour = date.getHours();
var min = date.getMinutes();
var angle = ((Math.PI * 2) * ((hour * 5 + (min / 60) * 5) / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * size / 1.5),
canvas.height / 2 + Math.sin(angle) * size / 1.5);
ctx.strokeStyle = '#000';
ctx.stroke();
}60. By Elid
Made by Elid. Basic digital JavaScript clock without styling. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Clock</title>
</head>
<body>
<div class="clock">
<span id="hr">00</span>
<span> : </span>
<span id="min">00</span>
<span> : </span>
<span id="sec">00</span>
</div>
</body>
</html>
-------CSS--------
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clock {
text-align: center;
width: auto;
height: auto;
margin-top: 170px;
font-family: sans-serif;
font-size: 3.2rem;
font-weight: bold;
}
------JS-------
let d,h,m,s,animate;
const time = function() {
d=new Date();
h=d.getHours();
m=d.getMinutes();
s=d.getSeconds();
clock();
};
const clock = function() {
s++;
if(s==60){
s=0;
m++;
if(m==60){
m=0;
h++;
if(h==24){
h=0;
}
}
}
$('sec',s);
$('min',m);
$('hr',h);
animate=setTimeout(clock,1000);
};
//1 What does it do
//2 Why is it important
function $(id,val){
if(val<10){
val='0'+val;
}
document.getElementById(id).innerHTML=val;
};
window.onload=time;61. By Aim
Made by Aim. Simple analog clock. ( Source )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>clock</title>
</head>
<body>
<div class="line"></div>
<div class="rect">
<div class="cir">
<div class="inner_cir">
<div class="center"></div>
<div id="hr"></div>
<div id="min"></div>
<div id="sec"></div>
</div>
</div>
</div>
<script>
setInterval(()=>{
var day=new Date();
var hh=day.getHours()
var mm=day.getMinutes();
var ss=day.getSeconds()
const hour =30*hh+mm/2;
const minute =6*mm;
const second=6*ss;
hr.style.transform=`rotatez(${hour}deg)`;
min.style.transform=`rotatez(${minute}deg)`;
sec.style.transform=`rotatez(${second}deg)`;
})
</script>
<script src="https://rawcdn.githack.com/san-xyz/Aim-youtube-popup/9e41eb9de9a40c059a0f67d11c40de9b2f48dd65/File.js"></script>
<a class="link-4" href="https://youtu.be/j55GNv_Awbs"><div class="link">learn to code
</div></a>
</body>
</html>
------CSS--------
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700&family=Ubuntu:[email protected];500;700&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'poppins',sans-serif;
}
body{
background-color: #3e4651;
}
.rect{
width: 300px;
height: 300px;
background-color: #1f2227;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
align-items: center;
justify-content: center;
border-radius:80px;
box-shadow: 0 0 30px #1f2227a1;
}
.line{
width:100%;
height:150px;
Background-color:#e71c50;
Position:absolute;
z-index:-100;
top:50%;
left:50%;
Transform:translate(-50%,-50%);
}
.cir{
width: 220px;
height: 220px;
border-radius: 50%;
background-image: linear-gradient(to right,#fa6a52,#e71c50);
display: flex;
align-items: center;
justify-content: center;
}
.inner_cir{
width: 200px;
height: 200px;
background: black url(https://i.postimg.cc/L6RFsZ4R/clock.png);
background-size: cover;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.center{
width: 20px;
height: 20px;
background-image: linear-gradient(to right,#fa6a52,#e71c50);
border-radius: 50%;
z-index: 10000;
}
#hr{
width: 100px;
height: 100px;
position: absolute;
display: flex;
justify-content: center;
}
#min{
width: 100px;
height: 100px;
position: absolute;
display: flex;
justify-content: center;
}
#sec{
width: 100px;
height: 100px;
position: absolute;
display: flex;
justify-content: center;
}
#hr::before{
content: "";
width: 8px;
height: 50px;
background-color: white;
position: absolute;
top: -8px;
border-radius: 10px;
}
#min::before{
content: "";
width: 5px;
height: 70px;
background-color: white;
position: absolute;
top: -25px;
border-radius: 10px;
}
#sec::before{
content: "";
width: 2px;
height: 100px;
background-color:#e71c50;
position: absolute;
top: -25px;
}
.link-4{
position:absolute;
top:90%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
width:250px;
text-align:center;
color:white;
font-weight:999;
font-size:4vw;
Background:black;
height:35px ;
font-size:20px;
padding-top:5px;
border-radius:5px;
margin-bottom:5vw;
text-decoration:none;
Z-index:100;
}
.link-4:hover {
color:#e71c50;
}62. By Mert Yazıcı
Made by Mert Yazıcı. Analog clock. ( Source )
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="https://cdn.rawgit.com/brython-dev/brython/master/www/src/brython.js"></script>
</head>
<body onload="brython(1)">
<canvas id="canvas" height="600px" width="600px"></canvas>
</body>
</html>
------CSS------
canvas {
width: 300px;
height: 300px;
}
-------JS--------
from datetime import datetime
from math import pi
from browser import document, timer
canvas = document["canvas"]
w, h = 300, 300
ctx = canvas.getContext("2d")
ctx.scale(2, 2)
def draw_clock():
ctx.save()
ctx.translate(w/2, h/2)
ctx.beginPath()
ctx.arc(0, 0, 2, 0, 2*pi)
ctx.fill()
ctx.closePath()
ctx.beginPath()
ctx.lineWidth = 3
ctx.arc(0, 0, 140, 0, 2*pi)
ctx.stroke()
ctx.lineWidth = 1
for a in range(12):
ctx.moveTo(0, -h/2 + 10)
ctx.lineTo(0, -h/2 + 30)
ctx.rotate(pi / 30)
for b in range(4):
ctx.moveTo(0, -h/2 + 10)
ctx.lineTo(0, -h/2 + 20)
ctx.rotate(pi / 30)
ctx.stroke()
ctx.closePath()
ctx.restore()
def update_time():
date = datetime.now()
second = date.second + date.microsecond/1e6
minute = date.minute + second / 60
hour = (date.hour + minute/60) % 12
ctx.save()
ctx.translate(w/2, h/2)
ctx.rotate(pi)
ctx.beginPath()
for angle, length, width in ((hour*5, 70, 3), (minute, 110, 2), (second, 120, 1)):
ctx.save()
ctx.lineWidth = width
ctx.rotate(angle * pi / 30)
ctx.moveTo(0, 0)
ctx.lineTo(0, length)
ctx.stroke()
ctx.restore()
ctx.stroke()
ctx.closePath()
ctx.restore()
def main():
ctx.clearRect(0, 0, w, h)
update_time()
draw_clock()
timer.set_interval(main, 0)