В Canvas HTML getSeconds (), есть ли способ запустить часы с 56 секунд 56 минут и 28 часов? - PullRequest
1 голос
/ 12 апреля 2019

Мы используем систему часов для нашего исследования Луны с 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 секунд. Отсюда задержка на несколько секунд в середине.

1 Ответ

1 голос
/ 12 апреля 2019

Признаюсь, я не совсем уверен, с какими начальными проблемами столкнулся ваш код.

Но так как вы определяете отношения своих единиц на расстоянии одного уровня (мс => сек => минут => часов => дней), вам может оказаться более понятным сохранить эту реляционную логику в своем коде.

Изначально у вас есть расстояние в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...