JavaScript Digital Clock

Web Design & Web Development

Demo

Sponsored links

 

Code

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Digital Clock</title>
    <link rel="stylesheet" type="text/css" href="https://demo.plantpot.works/assets/css/normalize.css">
    <link rel="stylesheet" href="https://use.typekit.net/opg3wle.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="clock.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="box">
        <div class="clock-header">
          <div id="week" class="week"></div>
          <div id="day" class="day"></div>/
          <div id="month" class="month"></div>/
          <div id="year" class="year"></div>
        </div>
        <div class="clock-content">
          <div id="hours" class="hours"></div>:
          <div id="minutes" class="minutes"></div>:
          <div id="seconds" class="seconds"></div>
          <div id="ampm" class="ampm"></div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

@charset "utf-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
}
body {
  background-color: #000;
  font-weight: 500;
  font-family: futura-pt, sans-serif;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
  width: 280px;
  padding: 30px;
  border-radius: 10px;
  background-color: #3551ff;
}
.box::before {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: -1;
  filter: blur(10px);
  border-radius: 10px;
  background-color: #3551ff;
  content: '';
}
.clock-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #fff;
  font-size: 1.5rem;
}
.week {
  margin-right: 15px;
}
.clock-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: #fff;
  font-size: 2.25rem;
  margin-top: 10px;
}
.ampm {
  font-size: 1.5rem;
}
#hours,
#minutes,
#seconds {
  width: 40px;
}
@media screen and (max-width: 480px) {
  .box {
    width: 240px;
    padding: 30px 20px;
  }
}

JavaScript

function startClock() {
  var year = document.getElementById("year");
  var month = document.getElementById("month");
  var day = document.getElementById("day");
  var week = document.getElementById("week");
  var hours = document.getElementById("hours");
  var minutes = document.getElementById("minutes");
  var seconds = document.getElementById("seconds");
  var ampm = document.getElementById("ampm");
  var ampmStr = "";

  var date = new Date();
  var yyyy = date.getFullYear();
  var mm = date.getMonth() + 1;
  var dd = date.getDate();
  var dayOfWeek = date.getDay();
  var dayOfWeekStr = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ][dayOfWeek];
  var hh = date.getHours();
  if(hh >= 12) {
    hh = hh - 12;
    ampmStr = "PM";
  }
  else {
    ampmStr = "AM";
  }
  var min = date.getMinutes();
  var sec = date.getSeconds();

  year.innerHTML = yyyy;
  month.innerHTML = ("0" + mm).slice(-2);
  day.innerHTML = ("0" + dd).slice(-2);
  week.innerHTML = dayOfWeekStr;
  hours.innerHTML = ("0" + hh).slice(-2);
  minutes.innerHTML = ("0" + min).slice(-2);
  seconds.innerHTML = ("0" + sec).slice(-2);
  ampm.innerHTML = ampmStr;
}

window.addEventListener('load', (event) => {
  setInterval(startClock, 1000);
});