时间戳

首页 > 解决方案 > 请求解决时钟指针每 2 小时跳动 1 小时的问题。希望它通过钟面平稳运行

javascript - 请求解决时钟指针每 2 小时跳动 1 小时的问题。希望它通过钟面平稳运行

问题描述

下午好，

我们创建了一个以以下格式运行的模拟时钟

28 小时 = 1 天

56 分钟 = 1 小时

56 秒 = 1 分钟

在模拟 28 小时制时钟中，秒数在整个钟面上运行 112 个滴答声。当秒数达到 56 和 112 时，分钟会发生变化。类似地，小时会在 56 小时内逐渐变化。我们注意到，当分钟在 14 点穿过 56 分钟大关时，时针每 2 小时异常移动一次。

任何人都可以帮助我们解决我们正在经历的障碍。

我们正在为“我们的月球生活”组织的研究工作创建上述时钟。这项研究工作的目的是帮助科学界在月球上创造生活条件。我们认为整个研究工作是一个共同的财产。我们非常尊重您对我们研究工作的帮助。

非常感谢，亲切的问候。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);


var ms_per_sec = 0.984; // 1000
var sec_per_min = 56; // 55.54920598892;
var min_per_hr = 56; // 55.54920598892;
var hrs_per_day = 28;

// let's make our target date at some fixed distance in our own time system
const countDownDate = 1555157555171; // 5 seconds

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 % 112);
  var seconds = Math.floor(total_seconds % 112);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").textContent = hours + "h "
  + minutes + "m " + seconds + "s ";
      drawFace(ctx, radius);
  drawNumbers(ctx, radius);
      drawTime(ctx, radius, days, hours, minutes, seconds);
  // If the count down is over, write some text 
  if (total_ms < 0) {
    document.getElementById("demo").innerHTML = "EXPIRED";
    return;
  }
  requestAnimationFrame(loop);
 }
 loop();



function drawClock() {
  

}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.08 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 29; num++){
    ang = num * Math.PI / 14;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius, days, hours, minutes, seconds){
   
    var hour = hours;
    var minute = minutes;
    var second = seconds;
    //hour
    hour=hours%28;
    hour=(hours*Math.PI/14)+
    (minutes*Math.PI/(14*112))+
    (seconds*Math.PI/(1568*112));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minutes*Math.PI/56)+(seconds*Math.PI/(224*112));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(seconds*Math.PI/56);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
<html>
<body>
<p id="demo"></p>
<canvas id="canvas" width="400" height="400"
style="background-color:#333">
</canvas>
</body>
</html>

标签： javascriptcanvashtml5-canvas

解决方案

问题在于您使用 56 或 112 计算分钟和秒的方式，具体取决于您将如何使用它们。我在这个小提琴中修复了它：https ://jsfiddle.net/1kx3scug/

唯一的变化是：

hour = ((second / sec_per_min + minute) / min_per_hr + hour) / hrs_per_day * 2 * Math.PI;

在drawTime里面

推荐阅读