javascript - 如何顺时针或逆时针旋转图像，以较短者为准？

Question

我正在制作一个网页，其中包含一个中心带有箭头的时钟。当用户点击一个小时时，箭头会旋转以指向他/她点击的内容。

我正在使用 jQuery 图像旋转插件 (jQueryRotate) 来旋转箭头。

这是计算旋转度数的当前代码:

var numTiles = $("ul li").size(); // Number of tiles is however many are listed in the UL, which is 12  
var sel = 0; // Default hour selection  
var rot = 0; // Default rotation is at the top (0 degrees)  
var gap = 360 / numTiles; // Degrees between each tile

function rotateArrow(num) {  
  rot = num * gap;  
  $("#arrow").rotateAnimation(rot);  
  sel = num;  
}  

当用户单击其中一个小时时，它会将 num 作为 1 到 12 的值传递。

它工作正常，但问题是如果箭头指向 1 点，并且用户单击 11 点，箭头顺时针旋转 300 度，逆时针旋转 60 度更有意义.

那么，我如何编写一个方程式来获取当前小时数 (num) 和单击的小时数 (sel)，并输出一个正数或负数的值，该值等于最有效的旋转度数，而不是只在一个方向旋转？

欢迎任何建议。如果您有任何问题，请告诉我。谢谢!

Answer 1

基本上最近的旋转总是小于 180 度，所以如果你的 Angular 大于 180，只需从中减去 360 得到负 Angular 。以你自己为例，如果你最终得到 300 度，减去 360 得到 -60 度。

所以要添加到您当前的代码行:

rot = num * gap;

你只需要:

if (rot > 180)
  rot -= 360;