Question

显然我的触发有点生疏。我怎样才能得到分钟来昼夜不停？

codepen [更新：忘记了codepen不像jsfiddle那样版本化;这个'笔'是一项正在进行的工作，不再代表我在这个问题时遇到的问题]

使用Javascript：

var r = $('.face').width()/2;
var j = r-18;
for(var min=0; min<60; min += 5) {
  var str = min < 10 ? '0'+min : String(min);
  var x = j*Math.sin(Math.PI*2*(min/60));
  var y = j*Math.cos(Math.PI*2*(min/60));
  console.log(x);
  $('<div>',{'class':'time'})
    .text(str)
    .css({
      marginLeft: (x+r-12)+'px',
      marginTop: (-y+r-12)+'px'
    })
    .appendTo('.face');
}

Answer 1

所有.time div都低于彼此。给.time类绝对定位。

Answer 2

假设min在0-60之间，并且记住圆圈中有360度：

var degToMin = 360/60; // 6
var minDeg = min * degToMin; // this will tell us how many degrees around the circle the minutes are
var minRad = minDeg * (Math.PI/180); // convert to radians
var x = j*Math.cos(minRad); // cos is the x coord, while sin is the y coord
var y = j*Math.sin(minRad);

Answer 3

从0到360度（0到2 pi弧度）通常从3点钟开始，然后逆时针旋转。

所以我们需要反转方向，使其顺时针旋转，并逆时针旋转90度（pi/2弧度），使其从12点开始。

每小时运行pi/6弧度，因此h小时的位置为：

x = x_c + r cos (-h*pi/6 + pi/2)
y = y_c + r sin (-h*pi/6 + pi/2)

您的时钟中心为(x_c, y_c)，时钟半径为r。

如何围绕时钟定位这些数字？

3 个答案: