CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Livin
Livin

Reputation: 23

In Canvas HTML getSeconds(), Is there a way to Run a clock with 56 second 56 minutes and 28 hours?

We are using a clock system for our Moon Research with 28 hours,

Here is how we are attempting to create it in Canvas HTML, * 1 minutes = 56 seconds * 1 hours = 56 minutes in this basis, we are trying to create an analog that runs for 112 minutes.

To achieve this we used the following two code bases for w3schools, - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_countdown digital clock value used to generate information for the analog clock - https://www.w3schools.com/graphics/tryit.asp?filename=trycanvas_clock_start fundamental Earth clock used to generate the 28-hour clock with 112 minutes ticks in the clock face.

we are not able to make the clock run for 56 seconds and the minute shift accurately. Can you please help us with the corrections. Thank you.

// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays 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 * (55.54920598892) * (55.54920598892) * 28));
  var hours = Math.floor(((distance) % (1000 * (55.54920598892) * (55.54920598892) * 28)) / (1000 * (55.54920598892) * (55.54920598892)));
 var hours = Math.floor(((distance) % (1000 * (55.54920598892) * (55.54920598892) * 28)) / (1000 * (55.54920598892) * (55.54920598892)));
  var minutes = Math.floor(((distance) % (1000 * (55.54920598892) * (55.54920598892))) / (1000 * (55.54920598892)));
  var seconds = Math.floor(((distance - 75) % (1000 * (55.54920598892))) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
</style>
</head>
<body>

<p id="demo"></p>

Current Result: the minute changes at 34 second mark Expected Result: instead of 56 second mark.

additional problem faced: the ticking time waits for 60 seconds before 56 second shifts. Hence delaying a few second shifts in middle.

Upvotes: 1

Views: 94

Answers (1)

Kaiido
Kaiido

Reputation: 136986

I have to admit I'm not quite sure what was the initial problem(s) with your code.

But since you are defining your units relations at one level distance (ms => sec => minutes => hrs => days), you may find it clearer to keep this relational logic in your code.

What you have initially is the distance in ms between your two dates. You can then calculate the total number of your_seconds this distance represents, using your own definition of a second (ms_per_sec in the snippet below). From there you can walk up to the number of days.

Then, you just have to get the modulus of the total over the base you defined.

Note that since you are now not dealing with real Earth seconds, you will have to handle your animation loop on an other base than the setInterval(fn, 1000), since ther could be some your_seconds that would fall on two different real seconds. Instead, you better use a requestAnimationFrame loop, which will fire at every screen refresh.

// our constants
var ms_per_sec = 300; // 1000
var sec_per_min = 7; // 55.54920598892;
var min_per_hr = 3; // 55.54920598892;
var hrs_per_day = 28;

// let's make our target date at some fixed distance in our own time system
var countDownDate = new Date().getTime() +
(1 * hrs_per_day * min_per_hr * sec_per_min * ms_per_sec) + // 1 day
(2 * min_per_hr * sec_per_min * ms_per_sec) + // two hours
(1 * sec_per_min * ms_per_sec) + // 1 minutes
(5 * ms_per_sec); // 5 seconds


// Update the count down every frame
function loop() {
  // Get todays date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var total_ms = (countDownDate - now);
  // from here our values are based on our own time system
  var total_seconds = (total_ms / ms_per_sec);
  var total_minutes = (total_seconds / sec_per_min);
  var total_hours = (total_minutes / min_per_hr);
  var total_days = (total_hours / hrs_per_day);
  
  var days = Math.floor(total_days);
  var hours = Math.floor(total_hours % hrs_per_day);
  var minutes = Math.floor(total_minutes % min_per_hr);
  var seconds = Math.floor(total_seconds % sec_per_min);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").textContent = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (total_ms < 0) {
    document.getElementById("demo").innerHTML = "EXPIRED";
    return;
  }
  requestAnimationFrame(loop);
 }
 loop();
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
<p id="demo"></p>

Upvotes: 1

Related Questions