Skip to main content

Digital Clock With Javascript | Rustcode

by Rustcode
Digital-clock-with-javascript

"Digital clock with javascript" is a very important animation for every developer because there are a lot of activities that are done within the time limit(for example test submit time, website launching page, limited time offer etc). We have created a lot of tutorials using javascript and plugins, if you wanna learn more, check it out.

In this tutorial, we have created a digital timing watch within a white box with a black body background and we used html, very basic css properties and javascript.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Digital Clock With Javascript | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<body onload="clock()">
  <div class="container">
    <h1>DIGITAL CLOCK</h1>
    <div id="clockbox"></div>
  </div>
</body>



03. css

body {
  padding: 0px;
  margin: 0px;
  font-family: sans-serif, Helvetica, Arial;
  background: #000;
}

.container {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  width: 40%;
  color: black;
  text-align: center;
  border-radius: 6px;
  font-weight: bold;
}

#clockbox {
  font-size: 42px;
  margin-bottom: 20px;
}



04. JavaScript

function clock(){
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  h = addZero(h);
  m = addZero(m);
  s = addZero(s);
  document.getElementById("clockbox").innerHTML = h + ' : ' + m + 'm: ' + s + 's';
  setTimeout(clock,1000);
}

function addZero(x){
  if (x < 10) {
    x = "0" + x;
  }
  return x;
}


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download source code, you can download from here and change this according to your need.




Comments

Post a Comment