Tiny Analog Clock In Pure JavaScript

Category: Date & Time , Javascript | October 26, 2016
0 Comment
Demo Download
Author:niloofarfs
Views Total:2,594 views
Official Page:Go to website
Last Update:October 26, 2016
License:MIT

Preview:

Tiny Analog Clock In Pure JavaScript

Description:

Use JavaScript and CSS to create a tiny analog clock on the webpage.

How to use it:

Include the analogClock.js file on the html page.

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

The html to insert the analog clock into the webpage.

<body onload="rClock()">
<div class="container">
  <div class="clock">
    <div class="h-hand" id="hour"> </div>
    <div class="m-hand" id="min"> </div>
    <div class="s-hand" id="sec"> </div>
  </div>
</div>
</body>

The primary CSS styles.

.clock {
  position: relative;
  background-image: url('images/e-clock.png');
  width: 500px;
  height: 500px;
  background-size: contain;
}
.h-hand {
  position: absolute;
  left: 240px;
  top: 155px;
  background-image: url('images/hour.png');
  height: 100px;
  width: 20px;
  background-size: 20px 100px;
  transform-origin: 50% 95%;
}
.m-hand {
  position: absolute;
  left: 240px;
  top: 80px;
  background-image: url('images/min.png');
  height: 180px;
  width: 20px;
  background-size: 20px 180px;
  transform-origin: 50% 95%;
}
.s-hand {
  position: absolute;
  left: 237px;
  top: 80px;
  background-image: url('images/sec-e.png');
  height: 180px;
  width: 30px;
  background-size: 30px 180px;
  transform-origin: 45% 95%;
}

See Also:

You Might Be Interested In:

Leave a Reply