仅用DIV元素通过JavaScript实现时钟：定位问题求助

我一眼就看出你的问题主要出在角度弧度转换搞反和元素定位原点没修正这两个点上，咱们一步步来解决：

问题诊断 #

1. 弧度角度转换错误：Math.cos()和Math.sin()接收的是弧度值，但你写的deg * (180 / Math.PI)是把弧度转成角度，完全搞反了，应该是deg * (Math.PI / 180)。
2. 元素定位原点偏差：你设置的left和top是刻度DIV的左上角坐标，但我们需要让刻度的底部中心对齐到时钟的边缘刻度点，所以得减去自身宽高的一半来修正偏移。
3. 旋转逻辑可以简化：没必要单独计算(90-deg)的正弦值，调整一下角度起始点就行。

修正后的完整代码 #

HTML（保持基本结构，微调时钟居中） #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Clock Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    <div id="clock"></div>
</body>
</html>

CSS（优化时钟居中，让刻度旋转逻辑更合理） #

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
body { 
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
} 
#clock { 
    height: 500px; 
    width: 500px; 
    background-color: #DDDDDD; 
    border-radius: 100%; 
    position: relative; /* 改为relative，让内部绝对定位元素以它为基准 */
} 
.h { 
    width: 10px; 
    height: 70px; 
    background-color: red;
    position: absolute;
    bottom: 50%; /* 先把刻度底部放在时钟中心 */
    left: 50%; /* 水平居中 */
    transform-origin: bottom center; /* 让刻度围绕底部中心旋转，逻辑更直观 */
    margin-left: -5px; /* 修正宽度带来的水平偏移 */
} 
.m { 
    width: 5px; 
    height: 80px; 
    background-color: blue;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    margin-left: -2.5px;
}

JavaScript（修正角度计算，简化定位逻辑） #

window.onload = function drawClock() {
    const clock = document.getElementById("clock");
    const clockSize = clock.offsetWidth;
    const radius = clockSize / 2;
    const tickLength = 70; // 和CSS里的.h高度对应

    for (let i = 1; i <= 12; i++) { // 循环到12，补上12点的刻度
        const tick = document.createElement("div");
        addClass(tick, "h");
        
        // 每个刻度间隔30度，从0度对应12点开始计算
        const deg = 30 * i;
        // 把角度转换为Math方法需要的弧度
        const rad = deg * (Math.PI / 180);
        
        // 计算刻度需要偏移的距离（半径减去刻度长度，让刻度从边缘向内延伸）
        const offset = radius - tickLength;
        // 计算偏移坐标
        const x = Math.sin(rad) * offset;
        const y = -Math.cos(rad) * offset;
        
        // 先平移到对应位置，再旋转刻度
        tick.style.transform = `translate(${x}px, ${y}px) rotate(${deg}deg)`;
        clock.appendChild(tick);
    }
}

function addClass(element, name) {
    const classNameArr = element.className.split(" ");
    if (!classNameArr.includes(name)) {
        element.className += ` ${name}`;
    }
}

优化点说明 #

1. CSS层面：用flex布局让时钟在页面垂直水平居中；给刻度设置transform-origin: bottom center，让旋转围绕刻度底部中心进行，逻辑更符合直觉；把时钟容器改为position: relative，确保内部元素定位正确。
2. JS层面：
   • 修正了弧度转换公式，解决了角度计算的核心错误。
   • 调整坐标计算逻辑，用translate实现偏移，替代复杂的left/top计算，代码更简洁。
   • 补上了12点的刻度，让时钟更完整。
   • 使用const/let替代var，代码更符合现代JS规范。

这样修改后，刻度就能精准对应时钟的12个点位了，后续添加分针、时针也可以复用类似的定位逻辑~

内容的提问来源于stack exchange，提问作者CodingTil