Javascript 拖动时将时钟指针旋转到正确的角度-JS

我用分针和时针实现了一个模拟时钟。本练习的目的是在拖动时将时钟指针旋转到小时标签的相应角度；i、 例如，当鼠标移动时

我发现的一些示例使用JQuery和其他库。我只想用香草js做这个。我看了这里的一些例子，在stackoverflow，以及其他地方，研究了逻辑并试图理解的文档，这是我所能得到的：

//旋转处理程序
const rotateHand=（事件）=>{
常量元素=event.target；
elem.style.cursor=“抓取”；
让旋转=真；
常量时钟=document.querySelector（“.gamut\uuuuu timePicker\uuuu clock”）；
常数半径=252/2；
常数旋转手柄=（e）=>{
常数弧度=数学常数2（e.pageX-半径，e.pageY-半径）；
设旋转度=（弧度*（180/数学π）*-1）-180；
如果（旋转）{
elem.style.transform=`rotate（${rotateDegrees}deg）`；
}
};
文件。添加了列表器（“鼠标移动”，旋转手柄）；
const cancelRotate=（事件）=>{
elem.style.cursor=“抓取”；
旋转=！旋转；
文件。移除EventListener（“鼠标移动”，旋转手柄）；
文件。删除EventListener（“鼠标悬停”，取消旋转）；
};
文件。添加文件列表（“鼠标”，取消旋转）；
};
document.querySelector（“.gamut\uuuu timePicker\uuu minHand”）。addEventListener（“mousedown”，rotateHand）；
document.querySelector（“.gamut\uuuu timePicker\uuuu hrHand”）。addEventListener（“mousedown”，rotateHand）
@导入url（“https://fonts.googleapis.com/css?family=Roboto&display=swap");
.gamut\uuuu时间选择器{
边框：1px纯色灰色；
宽度：300px；
高度：335px；
显示：-网络工具包盒；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
字体系列：“Roboto”，无衬线；
}
.gamut\uuuu计时器选择器{
高度：20px；
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：证明；
证明内容：之间的空间；
}
.gamut\uuuu计时器选择器\uuuuu meridiam选择器--meridiam{
文本对齐：居中；
-webkit-box-flex:1；
柔性生长：1；
边框：1px纯色灰色；
字体大小：0.875rem；
线高：20px；
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.gamut\uuuu计时器选择器\uuuuu meridiam选择器--meridiam:悬停{
背景：#efef；
}
.gamut\uuuu计时器选择器\uuuuu meridiamSelector--已选择{
背景：#607d8b！重要；
颜色：白色；
}
.gamut\uuuu计时器选择器\uuuuu时钟包装器{
-webkit-box-flex:1；
柔性生长：1；
自我调整：伸展；
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：中心；
证明内容：中心；
-webkit框对齐：居中；
对齐项目：居中；
位置：相对位置；
}
.gamut\uuuu计时器\uuu时钟{
边界半径：50%；
宽度：250px；
高度：250px；
边框：1px纯色灰色；
保证金：0自动；
位置：相对位置；
}
.gamut\uuuuu计时器\uuuuu时钟--minPointer{
宽度：1px；
高度：10px；
背景色：#4242；
位置：绝对位置；
-webkit转换源：0%0%；
变换原点：0%0%；
}
.gamut\uuuu计时器\uuuu时钟--hr指针{
位置：绝对位置；
-webkit转换源：0%0%；
变换原点：0%0%；
}
.gamut\uuuu计时器\uuu时钟--hrPointer:：before{
顶部：-4px；
左：-7px；
内容：“\25BC”；
位置：绝对位置；
}
.gamut\uuuu计时器选择器\uuuu标签{
边界半径：50%；
宽度：210px；
高度：210px；
保证金：0自动；
位置：绝对位置；
指针事件：无；
}
.gamut\uuuu计时器选择器\uuuu标签--小时标签{
位置：绝对位置；
-webkit转换：翻译（-50%，-45%）；
转换：翻译（-50%，-45%）；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.gamut\uuuu计时器选择器\uuuuu minHand{
宽度：20px；
高度：100px；
背景图片：url(https://res.cloudinary.com/dvzwvxhev/image/upload/v1578025454/clock_min.svg);
背景大小：100%100%；
位置：绝对位置；
-webkit转换来源：49%92%；
转化来源：49%92%；
最高：15%；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
光标：-webkit抓取；
光标：抓取；
}
.gamut\uuuuu计时器\uuuuh指针{
宽度：40px；
高度：70像素；
背景图片：url(https://res.cloudinary.com/dvzwvxhev/image/upload/v1578274567/clock_hr.svg);
背景大小：100%100%；
位置：绝对位置；
-webkit转换来源：50%93%；
转化来源：50%93%；
最高：25%；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
光标：-webkit抓取；
光标：抓取；
}
.gamut\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu时间{
高度：34px；
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：中心；
证明内容：中心；
}
.gamut\uuuu时间选择器\uuuu时间>输入{
宽度：35px；
边界：无；
边框底部：1px实心#阿巴巴；
文本对齐：居中；
字体大小：1.125rem；
大纲：无；
高度：25px；
填充：0；
}
.gamut\uuuu时间选择器\uuuu时间>输入：焦点{
边框底部：2个实心#607d8b；
}
.gamut\uuuu时间选择器\uuuu时间--分隔符{
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
字体大小：1.125rem；
高度：25px；
}
.gamut\uuuu计时器\uuuu完成{
背景：#efef；
文本对齐：居中；
边框顶部：1px纯色灰色；
光标：指针；
}
AMPM345678910111212:DONE
几何图形基本上很好，但您没有正确计算鼠标与时钟中心的距离@你能把你的评论作为答案发表吗？这样我就可以把它标记为可接受的解决方案了。另外，如果不是太多的问题，你能在你的答案上再补充一点吗？虽然，我非常感谢这个解决方案，但我想了解它是如何工作的