浅谈时钟的生成（JS手写简明代码）

在生成时钟的过程中，我想到了排列表盘的方法。

当然，它可以用这种模式实现，因此我们必须使用一种最好的方法来理解代码有一种相对简单的实现方法。

1。利用三角函数

JS在三角函数的过程中遇到这样的情况：布局表盘的刻度，计算出的值不能整数比三角函数，需要向上或向下取整，就这样，有一个轻微的偏差，这种偏差很难到位使用方式的调整，即使最后结果是可以实现的，但微妙的间隙和角度偏差会影响整体的视觉体验，作为一个开发者，视觉经验是很难被认可，放弃。

2。使用遮罩层

JS使用的面膜层，主要在刻度盘上，刻度盘长而短，每5个刻度都有较长的刻度，所以我们用掩模层来覆盖刻度的长度是一致的，很难继续调整剩余的刻度，所以也放弃了。

三.使用地点和（父子关系）（推荐）

我想我最好理解和利用位置和父子关系，并在这里分享：


{ *
保证金：0；
填充：0；
}
{ #时钟
宽度：600px；
身高：600px；
边境：4px固体浅灰色；
保证金：汽车；
职位：相对；
边框半径：50%；
}
{ #规模
宽度：20px；
身高：100%；
位置：绝对；
左：50%；
margin-left: - 10px；
背景：*绿色；
}
{ #点
宽度：4px；
身高：10px；
背景：浅灰色；
保证金：汽车；
}
{ #数
宽度：20px；
身高：20px；
边距：5px；
*背景：*红色；
字体大小：20px；
文本对齐：中心；
行高：20px；
}
{ #小时
宽度：12px；
身高：180px；
背景：红色；
边界半径：6px；
来源：50% 150px变换；
位置：绝对；
上图：150px；
左：50%；
margin-left: - 6px；
}
{ #分钟
宽度：8px；
身高：250px；
背景：橙色；
位置：绝对；
边界半径：4px；
来源：50% 200px变换；
上图：100px；
左：50%；
Margin-left: -4px;
}
{ #二
宽度：4px；
身高：360px；
背景：红色；
边界半径：2px；
位置：绝对；
顶部：0；
左：50%；
margin-left: - 2px；
来源：50% 300px变换；
Z指数：100；
}


Var clock = document.getElementById ('clock');
无功功率= document.getelementbyid（'hour）；
VaR分钟= document.getelementbyid（'minute）；
无功二= document.getelementbyid（第二）；

函数表面（）{
无功currentdate =新的日期（）；
无功小时= currentdate.gethours（）；
VaR分钟= currentdate.getminutes（）；
VaR秒= currentdate.getseconds（）；

秒=小时* 3600 +分钟* 60秒以上；

hour.style.transform = 'rotate（+秒 / 120 + 'deg）；
minute.style.transform = 'rotate（+秒* 0.1 + 'deg）；
second.style.transform = 'rotate（+秒* 6 + 'deg）；

}
setInterval（表面），（1000）；

对于（var i = 1；i < 61；i + +）{
VaR规模= document.createelement（'div）；
scale.id =规模；
scale.style.transform = 'rotate（+我* 6 + 'deg）；
clock.appendchild（尺度）；

VaR点= document.createelement（'div）；
point.id = 'point；
Scale.appendChild（点）；

VaR值= document.createelement（'div）；
number.id =数；
number.style.transform = 'rotate（- +我* 6 + 'deg）
如果（i % = 5 = 0）{
number.innerhtml =我/ 5；
point.style.height = '15px；
}
Scale.appendChild（数）；
}

要注意改正。

1，以下是最后一步的结果，做细节的紧紧的，她在微调没有其他方法，当完成式布局可以调整，获取当前时间，在标定过程中的问题，希望大家可以注意：不顺时针旋转角度小时计算，例如：9:58钟指的位置是9，在10:00，以下顺时针跳到10的位置，所以角度顺时针是在几分钟或秒，分钟点跳转到在几分钟或秒，第二是跳到6度/秒。

2，有一点要注意，旋转中心的三个指针，要设置旋转指针，必须建立转换原点。



关于时钟的产生上述讨论（JS手写代码简洁）是所有萧边分享你的内容。我希望能给你一个参考，希望你能支持它。