Javascript 检查模拟时钟指针的位置是否正确

Javascript 检查模拟时钟指针的位置是否正确,javascript,math,clock,angle,Javascript,Math,Clock,Angle,我正在创建一个模拟时钟输入方法,用户可以使用它来选择时间。用户可以点击内圈设置短手(小时),点击外圈设置长手(分钟) 问题是,用户可以自由点击时钟上的任何点,因此可以选择无效的指针位置。有什么方法(算法)可以检测到这一点吗 window.addEvent('domready', function() { var handLong = [10, 20, 30, 40, 50, 60, 70, 80]; var handShort = [10, 20, 30, 40, 50]; in

我正在创建一个模拟时钟输入方法,用户可以使用它来选择时间。用户可以点击内圈设置短手(小时),点击外圈设置长手(分钟)

问题是,用户可以自由点击时钟上的任何点,因此可以选择无效的指针位置。有什么方法(算法)可以检测到这一点吗

window.addEvent('domready', function()
{
  var handLong = [10, 20, 30, 40, 50, 60, 70, 80];
  var handShort = [10, 20, 30, 40, 50];

  injectHands('clock', handShort, handLong);

  $('clock').addEvent('click', function(e)
  {
    var x = correctX(e.page.x - e.target.getPosition().x, true);
    var y = correctY(e.page.y - e.target.getPosition().y, true);

    var angle = calculateAngle(x, y);

    // grote wijzer positioneren
    if (insideOuter(x, y))
    {
      moveHand(handLong, 'Long', angle);
    }
    // kleine wijzer positioneren
    else if (insideInner(x, y))
    {
      moveHand(handShort, 'Short', angle);
    }
  });
});

// Valt punt (x, y) binnen een cirkel met middenpunt (x, y) en radius r
function insideCircle(pointX, pointY, circleX, circleY, radius)
{
  dX = pointX - circleX;
  dY = pointY - circleY;

  return ((dX * dX) + (dY * dY)) <= (radius * radius);
}

// Valt punt (x, y) (enkel) binnen de buitenste cirkel (grote wijzer)
function insideOuter(pointX, pointY)
{
  return !insideInner(pointX, pointY) && insideCircle(pointX, pointY, 0, 0, 100);
}

// Valt punt (x, y) (enkel) binnen de binnenste cirkel (grote wijzer)
function insideInner(pointX, pointY)
{
  return insideCircle(pointX, pointY, 0, 0, 50);
}

// corrigeer x as (100 => 0) (0 => 100)
function correctX(x, nn)
{
  if (nn)
  {
    return x - 100;
  }
  return x + 100;
}

// corrigeer y as (100 => 0) (0 => 100)
function correctY(y, nn)
{
  if (nn)
  {
    return -y + 100;
  }
  return Math.abs(y - 100);
}

function calculateAngle(x, y)
{
  if ((x >= 0) && (y >= 0))
  {
    return Math.atan(x / y) * (180 / Math.PI);
  }
  else if (((x >= 0) && (y < 0)) || ((x < 0) && (y < 0)))
  {
    return 180 + Math.atan(x / y) * (180 / Math.PI);
  }
  else if ((x < 0) && (y >= 0))
  {
    return 360 - Math.abs(Math.atan(x / y) * (180/ Math.PI));
  }
}

function roundAngleByMinute(angle)
{
}

function calculateX(angle, hypotenuse)
{
  return Math.sin((Math.PI / 180) * angle) * hypotenuse;
}

function calculateY(angle, hypotenuse)
{
  return Math.cos((Math.PI / 180) * angle) * hypotenuse;
}

function injectHands(div, handShort, handLong)
{
  for (var i = 0; i < handShort.length; i++)
  {
    $(div).grab(new Element('img', {src: 'images/red_8x8.png', class: 'hands handShort', id: 'handShort-' + handShort[i]}));
  }
  for (var i = 0; i < handLong.length; i++)
  {
    $(div).grab(new Element('img', {src: 'images/blue_8x8.png', class: 'hands handLong', id: 'handLong-' + handLong[i]}));
  }

  $(div).grab(new Element('img', {src: 'images/black_8x8.png', class: 'hands', id: 'hand-center'}));

  $$('img.hands').hide();
  $('hand-center').show();
}

function moveHand(hand, whichHand, angle)
{
  for (var i = 0; i < hand.length; i++)
  {
    var hypotenuse = hand[i];
    var x = calculateX(angle, hypotenuse) - 5;
    var y = calculateY(angle, hypotenuse) + 5;
    var left = correctX(x);
    var top = correctY(y);

    $('hand' + whichHand + '-' + hypotenuse).set('styles', {'left': left + 'px', 'top': top + 'px'});
  }
  $$('img.hand' + whichHand).show();
}
window.addEvent('domready',function()
{
var handLong=[10,20,30,40,50,60,70,80];
var handShort=[10,20,30,40,50];
指针(“时钟”、短指针、长指针);
$('clock')。添加事件('click',函数(e)
{
var x=correctX(e.page.x-e.target.getPosition().x,true);
var y=correctY(e.page.y-e.target.getPosition().y,true);
可变角度=计算角度(x,y);
//格罗特-维杰尔定位器
if(内向外(x,y))
{
移动手(手长、长、角);
}
//kleine wijzer定位器
else if(内部(x,y))
{
移动手(手短、短、角);
}
});
});
//瓦特平顶(x,y)比南-西克尔与半径为r的正中平顶(x,y)相遇
函数insideCircle(pointX、pointY、circleX、circleY、radius)
{
dX=点x-圈;
dY=尖头y-圆环;
返回((dX*dX)+(dY*dY))0)(0=>100)
函数x(x,nn)
{
如果(nn)
{
返回x-100;
}
返回x+100;
}
//勘误表y as(100=>0)(0=>100)
功能校正(y,nn)
{
如果(nn)
{
返回-y+100;
}
返回Math.abs(y-100);
}
函数计算角度(x,y)
{
如果((x>=0)和&(y>=0))
{
返回Math.atan(x/y)*(180/Math.PI);
}
如果((x>=0)和(y<0))| |((x<0)和(y<0)))
{
返回180+Math.atan(x/y)*(180/Math.PI);
}
如果((x<0)和&(y>=0))
{
return360-Math.abs(Math.atan(x/y)*(180/Math.PI));
}
}
功能圆角按分钟(角度)
{
}
函数计算器(角度、斜边)
{
返回数学sin((数学PI/180)*角度)*斜边;
}
函数计算(角度、斜边)
{
返回Math.cos((Math.PI/180)*角度)*斜边;
}
手部功能(div、handShort、handLong)
{
对于(变量i=0;i
将时针位置四舍五入到最近的小时,并为当前分针位置添加相应的偏移量?

将时针位置四舍五入到最近的小时,并为当前分针位置添加相应的偏移量?

设置时针时,您可以计算出分针。三角学来营救! 设置分针时,假设分针向前移动到选定位置,并相应地调整时针


分针显示小时指针角度的函数,很像模运算符的工作原理


反之亦然:给定一个分针角度,只有十二个可能的时针角度。只需选择一个最接近当前时针角度的角度…

设置时针时,您就可以计算出分针。三角法有助于解决问题! 设置分针时,假设分针向前移动到选定位置,并相应地调整时针


分针显示小时指针角度的函数,很像模运算符的工作原理


反之亦然:给定一个分针角度,只有十二个可能的时针角度。只需选择一个最接近当前时针角度的角度…

我不完全理解:-(你说的“为当前分针位置添加相应的偏移量”是什么意思如果是16:30呢。那么时针在4和5之间有一半?是的……差不多……你也可以产生相反的影响。当拖动时针时,根据分针位置移动分针,或者根据分针位置移动分针,当拖动分针时,将时针稍微移动到相应的分针位置。我不同意完全遵循:-(您所说的“为当前分针位置添加相应的偏移量”是什么意思如果是16:30,那么时针在4和5之间的一半呢?是的……差不多……你也可以产生相反的影响。当拖动时针时,根据分时针的位置移动分针,或者根据时针移动分针,当拖动分针时,将时针稍微移动到相应的分时针位置。你知道吗e一些示例代码?噢,我想用一个。请不要使用Comic Sans。你有一些示例代码吗?噢,我想用一个。请不要使用Comic Sans“分针显示时针角度的函数”.你能给我描述一下吗?@tersmitten:要得到分针的角度,将时针的角度乘以12,然后取这个数字除以圆圈。例如,如果时针在57度(2点前不久),那么分针在
(57*12)%360=324度(54分钟)。“分针显示的是时针角度的函数”。你能给我描述一下吗?@tersmitten:去拿分针的