使用css和javascript的位置？

我制作了几个经典的php/javascript/css网页，所以这里有一些基本知识，但现在我需要创建一个占星术页面，其中包含行星在特定日期和时间的位置

行星的位置应该用两个圆圈以图形方式显示，一个圆圈在另一个圆圈内

两个圆圈被分成12个房屋（30度）

内圈应显示特定日期和时间（生日）的行星位置，外圈应显示当前行星位置（行星凌日）

我想我需要一些可读格式的瑞士星历源（可能是xml或json？）

可以使用javascript或者html画布吗

---

我需要一些一般性的说明-从哪里开始，完成这项任务的最短方法是什么？

一个可能的解决方案是创建两个包含行星的阵列。 一个阵列的行星位于内圈（时间/日期），另一个阵列的行星位于外圈（位置）

我想外圈是最容易的。对于每个行星，在圆上以弧度为单位存储一个角度的位置。例如：

var outerPlanets = [
    { name: 'planet one', position: 0.2},
    { name: 'planet two', position: 1.3}
];

内圈可能很棘手，因为它取决于日期/时间。但有一种方法是说（再次举例）圆上的0度是时间的开始。360度是现在

假设时间的起点是0，现在是2000，行星的生日是1200。这意味着它应该位于（1200/2000）*100%=60%的圆上，也就是（360/100）*60=216度

var innerPlanets = [
    { name: 'planet three', birthday: 1200},
    { name: 'planet four', birthday: 1800}
];

有了这些信息，你可以在阵列上循环，在画布上画出每个行星

var circleCenterX = 500;
var circleCenterY = 500;

var circleInnerRadius = 200;

var planetX = circleCenterX + (Math.cos(planet.angle) * circleInnerRadius);
var planetY = circleCenterY + (Math.sin(planet.angle) * circleInnerRadius);

需要注意的是：画布上的角度是弧度，而不是度：

var radians = degrees * (Math.PI / 180)
var degrees = radians * (180 / Math.PI)

---

您可以使用

canvas

或

svg

实现您想要的功能，还需要使用对象来存储行星的数据并执行操作accordingly@AminJafari，对象-你是说类吗？我说的是js，它没有面向对象语言中的类，所以基本上是的objects@AminJafari ,但是它说它是从ECMAScript 6开始提供的，ECMAScript 6目前对浏览器的支持非常有限，非常感谢您的想法，尤其是您的代码。我（今晚）会试试，我会把我的经验写在这里。不客气，祝你好运。如果你对你想要实现的目标有一个直观的了解，我也许可以更好地帮助你