60+ JavaScript Clock Examples

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>&nbsp;</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 = autoCall

24. 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)