Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 27, 2021 12:51 pm GMT

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-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


Original Link: https://dev.to/aditya57/accurate-clock-in-javascript-325l

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To