DigitalClock

In this example below you will see how to do a DigitalClock with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -_-Nina-_-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -_-Nina-_- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>DigitalClock</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Amita' rel='stylesheet'>
 

<center><button onclick="toggleClock()" id="clockButton">
    Hide Clock
  </button>
</center>
 <br><br>
  
  <div id="clock">
    
    <body onload="setInterval('updateTime()', 100)">
      
      </div>
  

</body>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/-_-Nina-_-/digitalclock-xPaPQZ */
#clock {
  padding:10px;
  margin-left: 620px;
  border: 3px dotted black;
  width: 600px;
  height: 130px;
  font-size: 100px;
  color: #00607A;
  background-color: #EFFCFF;
  font-family:Amita;
}

button {
  color: #7824C6;
  font-size: 2em;
  background-color: #FFEFDF;
  border: 2px solid black;
  box-shaodw: 4px 4px 4px #999999;
  font-family:Amita;
}

/*Downloaded from https://www.codeseek.co/-_-Nina-_-/digitalclock-xPaPQZ */
function updateTime() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var myClock = document.getElementById('clock');
  
  if(minutes < 10) {
    minutes = '0' +minutes;
  }
  
  if (seconds < 10) {
      seconds = '0' + seconds;
      }
  
  if (hours >=12 && hours < 24) {
    var timeOfDay = 'PM';
  }
  
  else {
    var timeOfDay = 'AM';
  }
  
  if (hours > 12) {
    hours = hours - 12
  }
  
  var currentTime = hours + ':' + minutes + ':' + seconds + ' ' + timeOfDay;
  myClock.innerHTML = currentTime;
}

function toggleClock() {
  
  var myClock = document.getElementById('clock');
  
  var displaySetting = myClock.style.display;
  
  var clockButton = document.getElementById('clockButton');
  
  if (displaySetting == 'block') {
    
    myClock.style.display = 'none';
    
    clockButton.innerHTML = 'Show clock';
  }
  
  else {
    
    myClock.style.display = 'block';
    
    clockButton.innerHTML = 'Hide Clock'
  }
}

Comments