Как разместить эти цифры вокруг часов?

Очевидно, мой триггер немного ржавый. Как я могу получить минуты для обхода часов?Как разместить эти цифры вокруг часов?

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'); 
}

источник

2013-09-30 mpen

Оказывается, ваш триггер прекрасен. – iamnotmaynard

Кстати, вы можете упростить 'Math.PI * 2 * (min/60)' to 'Math.PI * min/30' или даже просто' min * 0.10472' – Blazemonger

Все ваши .time divs находятся ниже друг друга. Дайте абсолютное позиционирование класса .time.

источник

2013-09-30 19:46:21 ioums

+1 за то, что он единственный правильный ответ. Я бы дал еще один, чтобы быть единственным, кто не допустил, что математика ошибочна, не читая ее. – iamnotmaynard

Hah! Я возился с CSS и, должно быть, удалил это. Спасибо, что поймал мою глупую ошибку :-) – mpen

Предполагая мин находится между 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);

источник

2013-09-30 19:40:50

OP уже имел дело с этим: 'Math.PI * 2 * (мин/60) '. Степени не вступают в это. – iamnotmaynard

Это правда, но я предпочитаю менее сложный код, особенно в примерах, поскольку его легче понять. Основная проблема, о которой я думаю, заключается в смешении cos и sin. –

Нет, код имеет триггерные функции в правильном порядке, так как он идет по часовой стрелке сверху, а не в правильное направление измерения угла. – iamnotmaynard

Переход от 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.

источник

2013-09-30 19:44:35 John

Он уже решил эту проблему, переключив «sin» и «cos» друг на друга. – Blazemonger

Как разместить эти цифры вокруг часов?

ответ

Смежные вопросы