CSS and JavaScript Digital Clock Widget

A well designed CSS and JavaScript digital clock widget with ultra lightweight. This plugin helps you to create calendar like digital clock that display local time in awesome way.

Plugin Overview

Plugin: digital-clock-widget
Author: Abhi
Licence: MIT Licence
Published: May 1, 2019
Repository: Fork on CodePen
Dependencies: Normalize CSS 5.0

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 3.87 KB



How to Use JavaScript Digital Clock

1. Load the Normalize and Digital Clock CSS file into HTML document.

<!--Normalize CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<!-- Digital Clock CSS -->
<link rel="stylesheet" href="css/style.css">

2. Create basic HTML structure for clock like below.

<div class="container">
  <div class="overlay"></div>
  <div class="table">
    <div class="inner">
      <div class="holder"></div>
    </div>
  </div>
  <div class="clock">
    <div class="top">
      <div class="t1 btn"></div>
      <div class="t2 btn"></div>
      <div class="t3 btn"></div>
    </div>
    <div class="inside">
      <div class="hour screen"></div>
      <div class="minute screen"></div>
    </div>
  </div>
</div>

3. Finally, include the clock‘s JavaScript file into your page and done.

<!-- Digital Clock Js -->
<script  src="js/index.js"></script>

Be the first to comment

Leave a Reply

Your email address will not be published.


*