时间戳

首页 > 解决方案 > 在 Canvas HTML getSeconds() 中，有没有办法以 56 秒 56 分 28 小时运行时钟？

javascript - 在 Canvas HTML getSeconds() 中，有没有办法以 56 秒 56 分 28 小时运行时钟？

问题描述

我们在月球研究中使用 28 小时的时钟系统，

这是我们尝试在 Canvas HTML 中创建它的方法，* 1 分钟 = 56 秒 * 1 小时 = 56 分钟在此基础上，我们尝试创建一个运行 112 分钟的模拟。

为了实现这一点，我们为 w3schools 使用了以下两个代码库 - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_countdown 用于生成模拟时钟信息的数字时钟值 - https://www .w3schools.com/graphics/tryit.asp?filename=trycanvas_clock_start 基本地球时钟用于生成 28 小时制时钟，钟面有 112 分钟刻度。

我们无法让时钟运行 56 秒并准确地移动分钟。你能帮助我们更正吗？谢谢你。

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

当前结果：分钟更改为 34 秒标记预期结果：而不是 56 秒标记。

面临的其他问题：滴答时间在 56 秒轮班之前等待 60 秒。因此在中间延迟了几秒钟的班次。

标签： javascripthtmlhtml5-canvas

解决方案

我不得不承认我不太确定你的代码最初的问题是什么。

但是，由于您在一个级别的距离（ms => sec => minutes => hrs => days）定义单位关系，您可能会发现在代码中保留这种关系逻辑更清晰。

您最初拥有的是ms两个日期之间的距离。然后，您可以使用您自己对一秒的定义（在下面的代码段中）计算此距离所代表的your_seconds的总数。ms_per_sec从那里你可以步行到天数。

然后，您只需要在您定义的基础上获得总数的模数。

请注意，由于您现在不处理真实​​的地球秒数，因此您必须在 之外的其他基础上处理动画循环setInterval(fn, 1000)，因为可能会有一些your_seconds会落在两个不同的真实秒数上。相反，您最好使用requestAnimationFrame循环，它会在每次屏幕刷新时触发。

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

推荐阅读