Accurate Clock in Javascript

Accurate Clock in Javascript

*Let’s start coding!

Html code:
create index.html and paste the following code.
 

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-U…


This content originally appeared on DEV Community and was authored by Aditya Kumar

Accurate Clock in Javascript

*Let's start coding!

Html code:
create index.html and paste the following code.
 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./script.js"></script>
  <title>Time</title>
</head>
<body onLoad="initClock()">
  <div id="content">
    <div id="timedate">
      <a id="mon">January</a>
      <a id="d">1</a>,
      <a id="y">0</a><br />
      <a id="h">12</a> :
      <a id="m">00</a>:
      <a id="s">00</a>:
      <a id="mi">000</a>
    </div>
  </div>
</body>
</html>

Css code:
create style.css and paste the following code.
 

body {background-color:#2d2d2d;}

#content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#timedate {
  font-size: 50px;
  text-align:left;
  width: 100%;
  margin: 40px auto;
  color:#fff;
  border-left: 10px solid #1f4fed;
  padding: 20px;
}

Javascript code:
create script.js and paste the following code.
 

Number.prototype.pad = function(n) {
  for (var r = this.toString(); r.length < n; r = 0 + r);
  return r;
};

function updateClock() {
  var now = new Date();
  var milli = now.getMilliseconds(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hou = now.getHours(),
    mo = now.getMonth(),
    dy = now.getDate(),
    yr = now.getFullYear();
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var tags = ["mon", "d", "y", "h", "m", "s", "mi"],
    corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli];
  for (var i = 0; i < tags.length; i++)
    document.getElementById(tags[i]).firstChild.nodeValue = corr[i];
}

function initClock() {
  updateClock();
  window.setInterval("updateClock()", 1);
}

Preview

Tryit and tell in Discussion

Thanks


This content originally appeared on DEV Community and was authored by Aditya Kumar


Print Share Comment Cite Upload Translate Updates
APA

Aditya Kumar | Sciencx (2021-04-27T12:51:19+00:00) Accurate Clock in Javascript. Retrieved from https://www.scien.cx/2021/04/27/accurate-clock-in-javascript/

MLA
" » Accurate Clock in Javascript." Aditya Kumar | Sciencx - Tuesday April 27, 2021, https://www.scien.cx/2021/04/27/accurate-clock-in-javascript/
HARVARD
Aditya Kumar | Sciencx Tuesday April 27, 2021 » Accurate Clock in Javascript., viewed ,<https://www.scien.cx/2021/04/27/accurate-clock-in-javascript/>
VANCOUVER
Aditya Kumar | Sciencx - » Accurate Clock in Javascript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/27/accurate-clock-in-javascript/
CHICAGO
" » Accurate Clock in Javascript." Aditya Kumar | Sciencx - Accessed . https://www.scien.cx/2021/04/27/accurate-clock-in-javascript/
IEEE
" » Accurate Clock in Javascript." Aditya Kumar | Sciencx [Online]. Available: https://www.scien.cx/2021/04/27/accurate-clock-in-javascript/. [Accessed: ]
rf:citation
» Accurate Clock in Javascript | Aditya Kumar | Sciencx | https://www.scien.cx/2021/04/27/accurate-clock-in-javascript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts