Clock

What is a clock How do you make a clock? This script and codes were developed by Martin Grand on 15 October 2021, Friday.

How do I make an clock?
  1. Clock Previews
  2. Clock HTML Codes
  3. Clock CSS Codes
  4. Clock JS Codes
Clock Previews

Clock HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Clock</title>
  <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body, html {
  height:100%; width:100%;
  margin:0; padding:0;
}
body {
  background:#dfd8c8;
}
#clock{
  width:200px; height:200px;
  background:#f2f2f4;
  border-radius:13px;
  position:absolute;
  left:50%; top:50%;
  margin:-100px;
  box-shadow:
    0 2px 0 #dfd8c8,
    0 4px 0 #eae4d6,
    0 5px 7px rgba(0,0,0,0.1),    
    0 5px 1px rgba(0,0,0,0.01),
    0 10px 2px rgba(0,0,0,0.01),
    0 15px 3px rgba(0,0,0,0.01),
    0 20px 4px rgba(0,0,0,0.01),
    0 25px 5px rgba(0,0,0,0.01),
    0 30px 6px rgba(0,0,0,0.01),
    0 35px 7px rgba(0,0,0,0.01),
    0 40px 8px rgba(0,0,0,0.01),
    0 45px 9px rgba(0,0,0,0.01),
    0 50px 10px rgba(0,0,0,0.01);   
  background:linear-gradient(#fbfdfa 0%, #f0efed 100%);
}
#clock .decoration {
  position:absolute;
  left:25px; right:25px;
  top:25px; bottom:25px;
  border-radius:3px;
  box-shadow:
    0 2px 0 #f7f6f4,
    0 -2px 0 #fbfbfb,
    inset 0 5px 15px rgba(0,0,0,0.08);
  background:linear-gradient(#e4e3e1 0%, #ebe7e4 100%);
}
#clock .decoration span {
  display:block;
  position:absolute;
  background:#a98c6b;
  box-shadow: 0 0px 2px rgba(0,0,0,0.2);
  margin:-3px;
}
#clock .decoration .top {
  width:6px; height:16px;
  left:50%; top:16px;
}
#clock .decoration .bottom {
  width:6px; height:16px;
  left:50%; bottom:16px;
}
#clock .decoration .left {
  width:16px; height:6px;
  left:16px; bottom:50%;
}
#clock .decoration .right {
  width:16px; height:6px;
  right:16px; bottom:50%;
}

#clock .pointers {
  z-index:2;
}
#clock .pointers span {
  display:block;
  position:absolute;
  z-index:2;
  width:100%; height:100%;
}
#clock .pointers span:after {
  display:block;
  position:absolute;
  content:'';
  background:#26231e;
  width:100px; height:4px;
  left:100px; top:100px;
  border-radius:10px;
}
#clock .pointers .houre:after {
  width:45px; height:6px;
  margin:-3px 0 0 -10px;
}
#clock .pointers .minute:after {
  width:68px; height:4px;
  margin:-2px 0 0 -12px;
}
#clock .pointers .second:after {
  width:73px; height:2px;
  margin:-1px 0 0 -20px;
  background:#ea593c;
}
#clock .pointers .second:before {
  position:absolute;
  content:'';
  border-radius:10px;
  width:6px; height:6px;
  margin:-3px;
  left:50%; top:50%;
  background:#ea593c;
}
#clock .pointers.shadow {
  margin-top:4px;
  z-index:1;
}
#clock .pointers.shadow span {
  z-index:1;
}
#clock .pointers.shadow > span:after,
#clock .pointers.shadow > span:before {
  background:#000 !important;
  opacity:0.33;
  filter: blur(1px);
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
}

#clock.aminate .pointers span {
   transition:transform 1s ease;  
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div id="clock">
  <div class="pointers">
    <span class="houre"></span>
    <span class="minute"></span>
    <span class="second"></span>    
  </div>
  <div class="pointers shadow">
    <span class="houre"></span>
    <span class="minute"></span>
    <span class="second"></span>    
  </div>
  <div class="decoration">
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="right"></span>
    <span class="left"></span>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Clock CSS Codes

body, html {
  height:100%; width:100%;
  margin:0; padding:0;
}
body {
  background:#dfd8c8;
}
#clock{
  width:200px; height:200px;
  background:#f2f2f4;
  border-radius:13px;
  position:absolute;
  left:50%; top:50%;
  margin:-100px;
  box-shadow:
    0 2px 0 #dfd8c8,
    0 4px 0 #eae4d6,
    0 5px 7px rgba(0,0,0,0.1),    
    0 5px 1px rgba(0,0,0,0.01),
    0 10px 2px rgba(0,0,0,0.01),
    0 15px 3px rgba(0,0,0,0.01),
    0 20px 4px rgba(0,0,0,0.01),
    0 25px 5px rgba(0,0,0,0.01),
    0 30px 6px rgba(0,0,0,0.01),
    0 35px 7px rgba(0,0,0,0.01),
    0 40px 8px rgba(0,0,0,0.01),
    0 45px 9px rgba(0,0,0,0.01),
    0 50px 10px rgba(0,0,0,0.01);   
  background:linear-gradient(#fbfdfa 0%, #f0efed 100%);
}
#clock .decoration {
  position:absolute;
  left:25px; right:25px;
  top:25px; bottom:25px;
  border-radius:3px;
  box-shadow:
    0 2px 0 #f7f6f4,
    0 -2px 0 #fbfbfb,
    inset 0 5px 15px rgba(0,0,0,0.08);
  background:linear-gradient(#e4e3e1 0%, #ebe7e4 100%);
}
#clock .decoration span {
  display:block;
  position:absolute;
  background:#a98c6b;
  box-shadow: 0 0px 2px rgba(0,0,0,0.2);
  margin:-3px;
}
#clock .decoration .top {
  width:6px; height:16px;
  left:50%; top:16px;
}
#clock .decoration .bottom {
  width:6px; height:16px;
  left:50%; bottom:16px;
}
#clock .decoration .left {
  width:16px; height:6px;
  left:16px; bottom:50%;
}
#clock .decoration .right {
  width:16px; height:6px;
  right:16px; bottom:50%;
}

#clock .pointers {
  z-index:2;
}
#clock .pointers span {
  display:block;
  position:absolute;
  z-index:2;
  width:100%; height:100%;
}
#clock .pointers span:after {
  display:block;
  position:absolute;
  content:'';
  background:#26231e;
  width:100px; height:4px;
  left:100px; top:100px;
  border-radius:10px;
}
#clock .pointers .houre:after {
  width:45px; height:6px;
  margin:-3px 0 0 -10px;
}
#clock .pointers .minute:after {
  width:68px; height:4px;
  margin:-2px 0 0 -12px;
}
#clock .pointers .second:after {
  width:73px; height:2px;
  margin:-1px 0 0 -20px;
  background:#ea593c;
}
#clock .pointers .second:before {
  position:absolute;
  content:'';
  border-radius:10px;
  width:6px; height:6px;
  margin:-3px;
  left:50%; top:50%;
  background:#ea593c;
}
#clock .pointers.shadow {
  margin-top:4px;
  z-index:1;
}
#clock .pointers.shadow span {
  z-index:1;
}
#clock .pointers.shadow > span:after,
#clock .pointers.shadow > span:before {
  background:#000 !important;
  opacity:0.33;
  filter: blur(1px);
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
}

#clock.aminate .pointers span {
   transition:transform 1s ease;  
}

Clock JS Codes

$('.houre, .minute, .second').data('plus-deg', 0)
calcTime();
$('#clock').addClass('aminate');
var int = setInterval(calcTime, 1000);
function calcTime () {
  var d = new Date();
  var h = d.getHours();
  rotate($('.houre'),  ((h > 12 ? h - 12 : h)*30)-90);
  rotate($('.minute'), (d.getMinutes()/*0-59*/*6)-90);
  rotate($('.second'), (d.getSeconds()/*0-59*/*6)-90);
}
function rotate ($object, deg) {
  var original_deg = deg;
  if(deg != $object.data('deg')){
    if(deg == -90) {
      $object.data('plus-deg', $object.data('plus-deg')+360);
    }
    deg += $object.data('plus-deg');
    $object.css({
      '-webkit-transform' : 'rotate('+deg+'deg)',
      '-moz-transform' : 'rotate('+deg+'deg)',  
      '-ms-transform' : 'rotate('+deg+'deg)',  
      '-o-transform' : 'rotate('+deg+'deg)',  
      'transform' : 'rotate('+deg+'deg)',  
      'zoom' : 1
    });
    $object.data('deg', original_deg);
  }
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.