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: January 12, 2024
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 class="clock">
    <div class="top">
      <div class="t1 btn"></div>
      <div class="t2 btn"></div>
      <div class="t3 btn"></div>
    <div class="inside">
      <div class="hour screen"></div>
      <div class="minute screen"></div>

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

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link