How to create a real time clock box by using javascript?

User avatar
RachelPeene
Posts: 6
Joined: Sat Oct 01, 2016 12:13 pm

How to create a real time clock box by using javascript?

Fri Mar 29, 2019 4:15 am

Here, we can do this by:

Our html or php
<link rel="stylesheet" href="/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
<div class="clock" id="clockbox"></div>
</div>
The .css or edit on your desire design
.clock{
font-size:24px;
font-family:arial;
text-align:center;
}
.container{margin-top:100px;}
and, finally our script

Code: Select all

var tday = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];
var tmonth = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];
function GetClock() {
  var d = new Date();
  var nday = d.getDay(),
      nmonth = d.getMonth(),
      ndate = d.getDate(),
      nyear = d.getFullYear();
  var nhour = d.getHours(),
      nmin = d.getMinutes(),
      nsec = d.getSeconds(),
      ap;
  if (nhour == 0) {
    ap = " AM";
    nhour = 12;
  } else if (nhour < 12) {
    ap = " AM";
  } else if (nhour == 12) {
    ap = " PM";
  } else if (nhour > 12) {
    ap = " PM";
    nhour -= 12;
  }
  if (nmin <= 9) nmin = "0" + nmin;
  if (nsec <= 9) nsec = "0" + nsec;
  var clocktext =
      "" +
      tday[nday] +
      ", " +
      tmonth[nmonth] +
      " " +
      ndate +
      ", " +
      nyear +
      " " +
      nhour +
      ":" +
      nmin +
      ":" +
      nsec +
      ap +
      "";
  document.getElementById("clockbox").innerHTML = clocktext;
}
GetClock();
setInterval(GetClock, 1000);


Return to “WEB DESIGN, PHP, HTML”

Links

In total there are 8 users online :: 0 registered, 0 hidden and 8 guests
Registered users: No registered users
Most users ever online was 19 on Mon May 20, 2019 11:06 pm
Total posts 525
Total topics 404
Total members 73
Our newest member Kelly
No birthdays today