TheLazy.Dev
Portfolio GitHub

Blog

webdev |html |css |javascript

Digital Clock Design (Segment Display Design)

o-opeyemi

Opeyemi Ogunsanya

Posted on May 13, 2023

Digital Clock Design (Segment Display Design)

Hi there long time of me writing an article here.

Few months ago while designing my personal website i actually thought of a design element and surfed through the internet if i could find one that matches it but did not. Well after thinking through it finally designed it and used it on my Personal Website (OPEYEMI OGUNSANYA).

Let's get started in building our digital clock.
First let's create our html elements.
In the design of a seven segment display for each digits there are seven bars forming a digit to be displayed and to display a digit from 0 - 9 we either turn on one or all bars for a digit to be displayed.

<style>
.clock {
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.hours {
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.digit_1,
.digit_2 {
  width: 40%;
  height: 100%;
  position: relative;
}
.digit_1 div {
  position: absolute;
}
.bar_1,
.bar_2,
.bar_3,
.bar_4,
.bar_5,
.bar_6,
.bar_7 {
  height: 10%;
  width: 60%;
  border-radius: 5px;
  background: #000000;
}
.bar_1 {
  left: 30%;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_2 {
  top: 20%;
  left: 70%;
  transform: rotate(90deg);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_3 {
  top: 70%;
  left: 70%;
  transform: rotate(90deg);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_4 {
  top: 90%;
  left: 30%;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_5 {
  top: 70%;
  left: -10%;
  transform: rotate(90deg);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_6 {
  top: 20%;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  left: -10%;
  transform: rotate(90deg);
}
.bar_7 {
  top: 45%;
  left: 30%;
  clip-path: polygon(80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0);
}
</style>
<div class="container">
<div class="clock">
    <div class="hours">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

This shows a digit been displayed very well and a full design of a digit can be represented using this design. To have the full time display use code below:

HTML

<div class="container">
  <div class="clock">
    <div class="hours">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
      <div class="digit_2">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
    <div class="colon">
      <div class="dot_1"></div>
      <div class="dot_2"></div>
    </div>
    <div class="minutes">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
      <div class="digit_2">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
    <div class="colon">
      <div class="dot_1"></div>
      <div class="dot_2"></div>
    </div>
    <div class="seconds">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
      <div class="digit_2">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
    <div class="day"></div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.container {
    display: flex;  
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.clock {
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.hours,
.minutes,
.seconds {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.colon {
    width: 3%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.digit_1,
.digit_2 {
    width: 40%;
    height: 100%;
    position: relative;
}
.digit_1 div,
.digit_2 div {
    position: absolute;
}
.bar_1,
.bar_2,
.bar_3,
.bar_4,
.bar_5,
.bar_6,
.bar_7 {
    height: 10%;
    width: 60%;
    border-radius: 5px;
    background: #000000;
}
.dot_1,
.dot_2 {
    height: 10%;
    width: 40%;
    border-radius: 5px;
    position: relative;
    background: #000000;
}
.dot_1{
    top: -20%;
    left: 20%;
}
.dot_2{
    top: 20%;
    right: 20%;
}
.bar_1 {
    left: 30%;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_2 {
    top: 20%;
    left: 70%;
    transform: rotate(90deg);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_3 {
    top: 70%;
    left: 70%;
    transform: rotate(90deg);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_4 {
    top: 90%;
    left: 30%;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_5 {
    top: 70%;
    left: -10%;
    transform: rotate(90deg);
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_6 {
    top: 20%;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
    left: -10%;
    transform: rotate(90deg);
}
.bar_7 {
    top: 45%;
    left: 30%;
    clip-path: polygon(80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0);
}
Enter fullscreen mode Exit fullscreen mode

This is a representation of a digit in the seven segment display
We can see that we have defined each segments well detailed by setting each bars for each number to be displayed in each sections of a digital clock, sections such as

  • Hours
  • Minutes
  • Seconds

So for full design implementation we need to add an handler for full implementation by adding the following JavaScript.

Note: Add one of the latest version of jquery.

JavaScript

function time() {
  var day = new Date();
  var hh = day.getHours();
  if (hh > 12) {
    hh = hh - 12;
    $(".day").text("PM");
  } else {
    $(".day").text("AM");
  }
  var hour = hh.toString(10);
  if (hour.length < 2) {
    hour = "0" + hour;
  }
  if (hh > 12) {
    console.log(hh);
    hh = hh - 12;
  }
  for (var i = 0; i < hour.length; i++) {
    var digit_index = i + 1;
    getNumber(hour[i], ".hours ", ".digit_" + digit_index);
  }
  var mm = day.getMinutes();
  var minutes = mm.toString(10);
  if (minutes.length < 2) {
    minutes = "0" + minutes;
  }
  for (var i = 0; i < minutes.length; i++) {
    var digit_index = i + 1;
    getNumber(minutes[i], ".minutes ", ".digit_" + digit_index);
  }
  var ss = day.getSeconds();
  var seconds = ss.toString(10);
  if (seconds.length < 2) {
    seconds = "0" + seconds;
  }
  for (var i = 0; i < seconds.length; i++) {
    var digit_index = i + 1;
    getNumber(seconds[i], ".seconds ", ".digit_" + digit_index);
  }
}
setInterval(() => {
  time();
});
  function getNumber(number, position, digit) {
  if (number == "0") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "none");
  } else if (number == "1") {
    $(position + digit + " .bar_1").css("display", "none");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "none");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "none");
  } else if (number == "2") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "none");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "3") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "4") {
    $(position + digit + " .bar_1").css("display", "none");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "none");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "5") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "none");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "6") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "none");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "7") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "none");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "none");
  } else if (number == "8") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "9") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  }
}
Enter fullscreen mode Exit fullscreen mode

Finally our digital clock display has been created.
For Support kindly add me to your next project as a full stack web developer or recommending me to someone. My profile links are as follows:

Thanks for reading!!!

💖 💪 🙅 🚩
o-opeyemi
Opeyemi Ogunsanya

Posted on May 13, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How I show Bluesky likes on my blog posts
webdev How I show Bluesky likes on my blog posts

November 22, 2024

I am kaustubh kulkarni
webdev I am kaustubh kulkarni

October 27, 2024

Heartfelt Timer App with HTML/CSS/JS Only!
webdev Heartfelt Timer App with HTML/CSS/JS Only!

October 19, 2024

The Plight of the UXD
webdev The Plight of the UXD

September 20, 2024

How to Create a Dark Mode Toggle with HTML, CSS, and JavaScript
webdev How to Create a Dark Mode Toggle with HTML, CSS, and JavaScript

August 29, 2024