Question

我们为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秒标记。

面临的其他问题：滴答时间要等60秒才能转换56秒。因此，延迟了中间几秒钟的移位。

Answer 1

我必须承认我不太确定您的代码最初的问题是什么。

但是，由于您是在一个水平距离（毫秒=>秒=>分钟=>小时=>天）上定义单位关系，因此您可能会发现将这种关系逻辑保留在代码中更为清晰。

您最初拥有的是两个日期之间在ms中的距离。然后，您可以使用自己定义的秒数（以下代码段中的ms_per_sec）来计算该距离表示的 your_seconds 总数。从那里您可以走到几天。

然后，您只需要获得所定义基数上的合计模数即可。

请注意，由于您现在不处理实际的地球秒，因此您将不得不在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>

在Canvas HTML getSeconds（）中，是否可以运行56秒56分28小时的时钟？

1 个答案: