How can I code a clock to show me that how much time is left of the day?

Question

I have succeeded to make a clock using HTML, CSS and JS. But now I want it not to show me the time but to show me how much time is left of the day.

<!DOCTYPE html>
<html lang="en">

<head>

  <title>InversedClock</title>
  <link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
  <style>
    #clock {
      margin: auto;
      width: 300px;
      height: ;
      background-color: black;
      font-family: "Concert One";
      color: #7ef9ff;
      font-size: 48px;
      text-align: center;
      padding: 5px 5px 5px 5px;
    }
  </style>
</head>

<body>
  <div id="clock"></div>
  <script>
    function currentTime() {
      var date = new Date(); /* creating object of Date class */
      var hour = date.getHours();
      var min = date.getMinutes();
      var sec = date.getSeconds();
      hour = updateTime(hour);
      min = updateTime(min);
      sec = updateTime(sec);
      document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */
      var t = setTimeout(function() {
        currentTime()
      }, 1000); /* setting timer */
    }

    function updateTime(k) {
      if (k < 10) {
        return "0" + k;
      } else {
        return k;
      }
    }

    currentTime(); /* calling currentTime() function to initiate the process */
  </script>
</body>

</html>

I'm not sure, maybe it would be like a count down timer, but it will be synched with the clock I guess.

https://stackoverflow.com/questions/62511356/how-to-calculate-the-time-left-in-days-hours-minutes-and-seconds-left-to-reac You might want to take a look at this. — dstmb, Jun 14 '21 at 10:43

score 1 · Accepted Answer · edited Jun 14 '21 at 11:02

not sure this is what you need but here is an attempt, this will show the tie left till midnight using the time of your device

<!DOCTYPE html>
<html lang="en">

<head>

  <title>InversedClock</title>
  <link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
  <style>
    #clock {
      margin: auto;
      width: 300px;
      height: ;
      background-color: black;
      font-family: "Concert One";
      color: #7ef9ff;
      font-size: 48px;
      text-align: center;
      padding: 5px 5px 5px 5px;
    }
  </style>
</head>

<body>
  <div id="clock"></div>
  <script>
    function currentTime() {
      var toDate = new Date();
      var tomorrow = new Date();
      tomorrow.setHours(24, 0, 0, 0);
      var diffMS = tomorrow.getTime() / 1000 - toDate.getTime() / 1000;
      var diffHr = Math.floor(diffMS / 3600);
      diffMS = diffMS - diffHr * 3600;
      var diffMi = Math.floor(diffMS / 60);
      diffMS = diffMS - diffMi * 60;
      var diffS = Math.floor(diffMS);
      var result = ((diffHr < 10) ? "0" + diffHr : diffHr);
      result += ":" + ((diffMi < 10) ? "0" + diffMi : diffMi);
      result += ":" + ((diffS < 10) ? "0" + diffS : diffS);
      document.getElementById("clock").innerText = result; /* adding time to the div */
      var t = setTimeout(function() {
        currentTime()
      }, 1000); /* setting timer */
    }

    function updateTime(k) {
      if (k < 10) {
        return "0" + k;
      } else {
        return k;
      }
    }

    currentTime(); /* calling currentTime() function to initiate the process */
  </script>
</body>

</html>

Hassen Ch. · Answer 2 · 2021-06-14T11:04:20.253

Basically, all what you need to do is set the end date you want to compare against, to the end of the day.

 var countDownDate = new Date();
 countDownDate.setHours(23, 59, 59, 999);

To make sure that you show 01 seconds left instead of 1, you could do as following:

yourResult.toString().padStart(2, "0");

This solution is inspired by this post by w3schools

<!DOCTYPE html>
<html lang="en">

<head>

  <title>InversedClock</title>
  <link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
  <style>
    #clock {
      margin: auto;
      width: 300px;
      height: ;
      background-color: black;
      font-family: "Concert One";
      color: #7ef9ff;
      font-size: 48px;
      text-align: center;
      padding: 5px 5px 5px 5px;
    }
  </style>
</head>

<body>
  <div id="clock"></div>
  <script>
    // Update the count down every 1 second
    var x = setInterval(function() {
      var countDownDate = new Date();
      countDownDate.setHours(23, 59, 59, 999);

      // Get today's date and time
      var now = new Date().getTime();

      // Find the distance between now and the count down date
      var distance = countDownDate - now;

      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, "0");
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, "0");
      var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString().padStart(2, "0");

      // Display the result in the element with id="clock"
      document.getElementById("clock").innerText = hours + " : " + minutes + " : " + seconds; /* adding time to the div */


    }, 1000);
  </script>
</body>

</html>

To the person that downvoted this answer. I want some explanations please. — Hassen Ch., Jun 14 '21 at 10:53
You don't need the `var days = Math.floor(distance / (1000 * 60 * 60 * 24));` — Gass, Jun 14 '21 at 11:09
For sure this could be enhanced. I simply inspired my answer from https://www.w3schools.com/howto/howto_js_countdown.asp — Hassen Ch., Jun 14 '21 at 11:16
I don't like this code much, I think W3 school overcomplicated it. — Gass, Jun 14 '21 at 11:34

Praneeth Kumar · Answer 3 · 2021-06-14T13:31:38.783

just use your code and the values you already have

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>InversedClock</title>
      <link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
      <style>
         #clock {
         margin: auto;
         width: 300px;
         height:100px ;
         background-color: black;
         font-family: "Concert One";
         color: #7ef9ff;
         font-size: 48px;
         text-align: center;
         padding: 5px 5px 5px 5px;
         }
         #endclock {
         display:block
         margin: auto;
         width: 300px;
         height: 100px;
         background-color: black;
         font-family: "Concert One";
         color: #7ef9ff;
         font-size: 48px;
         text-align: center;
         padding: 5px 5px 5px 5px;
         }
      </style>
   </head>
   <body>
      <div id="clock"></div>
      <div id="endclock"></div>
      <script>function currentTime() {
         var date = new Date(); /* creating object of Date class */
         var hour = date.getHours();
         var min = date.getMinutes();
         var sec = date.getSeconds();
         hour = updateTime(hour);
         min = updateTime(min);
         sec = updateTime(sec);
         document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */
         
         document.getElementById("endclock").innerText = pad(23-hour) + " : " + pad(59-min) + " : " + pad(60-sec); /* adding time to the div */
           var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */
         }
         
         function pad(n) {
         return (n < 10) ? ("0" + n) : n;
         }
         
         function updateTime(k) {
         if (k < 10) {
           return "0" + k;
         }
         else {
           return k;
         }
         }
         
         currentTime(); /* calling currentTime() function to initiate the process */
      </script>
   </body>
</html>

thank you for your help, it's what I was looking for. But how can have the time as "07:05:29" instead of " 7 : 5 : 29" I mean if the time has only one digit, I just want to be a 0 before it so that it looks more good. — eisha enan, Jun 14 '21 at 10:57
@eishaenan you can use a ternary operator for that and check whether it's less than 10 and append the padding accordingly. — Praneeth Kumar, Jun 14 '21 at 13:32

Gass · Answer 4 · 2021-06-14T13:09:27.467

setInterval(function() {
  var endTimer = new Date();
  endTimer.setHours(23,59,59); // ms until time set

  var now = new Date().getTime(); // ms now
  var dist = (endTimer - now)/1000; // dist in secs 
  var hrs = Math.floor(dist/3600).toString();
  var mins = Math.floor((dist - hrs * 3600)/60).toString();
  var secs = Math.floor((dist - hrs * 3600 - mins * 60)).toString();
  
  document.getElementById('clock').innerText = 
  hrs.padStart(2,'0') + ':' + mins.padStart(2,'0') + ':' + secs.padStart(2,'0');
},1000);

#clock {
  color: #black;
  font-size: 48px;
  text-align: center;
  padding: 5px;
}

<div id="clock"></div>

How can I code a clock to show me that how much time is left of the day?

4 Answers4

Linked