五步轻松实现JavaScriptHTML时钟效果

学了一段时间的HTML、CSS和JS后，给大家做一款漂亮的不像实力派的HTML时钟，先看图：

涉及到的知识点有： CSS3动画、DOM操作、定时器、圆点坐标的计算（好多人是不是已经还给自己的老师了~）
接下来，我们用5步来制作它

step1、准备HTML

首先，我们需要准备HTML结构，背景、表盘、指针（时针、分针、秒针）、数字。

<p id="clock">
 <p class="bg">
  <p class="point">
   <p id="hour"></p>
   <p id="minute"></p>
   <p id="second"></p>
   <p class="circle"></p>
  </p>
 </p>
< /p>

step2、准备CSS

定义好指针的颜色和大小，需要说明的是transform: rotate(-90deg); 用来旋转指针，transform-origin:0 6px; 用来设置旋转中心点。

<style>
 *{
  margin: 0;
  padding: 0;
 }
 #clock{
  margin: 5% auto;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  background: #aaa;
  position: relative;
  transform: rotate(-90deg);
 }
 #clock .bg{
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -180px;
  margin-top: -180px;
 }
 #clock .point{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -14px;
  margin-top: -14px;
 }
 #clock #hour{
  width: 80px;
  height: 16px;
  background: #000;
  margin: 6px 0 0 14px;
  /*transform: rotate(30deg);*/
  transform-origin:0 8px;
  /*animation: hour 3s linear 100!* alternate*!;*/
  border-radius: 16px;
 }

 #clock #minute{
  width: 120px;
  height: 12px;
  background: #000;
  margin: -14px 0 0 14px;
  transform-origin:0 6px;
  border-radius: 12px;
 }
 #clock #second{
  width: 160px;
  height: 6px;
  background: #f00;
  margin: -9px 0 0 14px;
  transform-origin:0 3px;
  border-radius: 6px;
 }
 #clock .point .circle{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
 }
 @keyframes hour {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
 }

 #clock .number{
  position: absolute;
  font-size: 34px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  transform: rotate(90deg);
 }
< /style>

step3、计算时针位置

JS通过Date对象获取当前时间，getHours获取小时、getMinutes获取分钟、getSeconds获取秒。时针转动一周是12格，每格角度就是360°/12，分钟和秒都是60格，每格角度360°/60。

step4、时钟转动

通过setInterval设置定时器，每秒刷新一次。注意，需要初始化执行一次，否则会在1s后才能看到效果。

step5、绘制数字时间

数字时间也是在一个圆周上，我们只用确定好半径，然后得到半径上的坐标。通过左边来定位每个数字就好了。看一下圆坐标系的计算规则：

* 圆半径坐标计算：
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle);
但是注意，我们计算的坐标是圆弧上点的坐标，当定位每个数字时，都是以元素的左上角点进行定位，这样我们的数字就会存在偏移。也就是说数字的中心点不在圆弧上，解决办法就是把坐标点(x,y)平移自身的一半(x-w/2, y-h/2)
，这样数字的中心点就在圆弧上了。

完整JS代码：

以上就是本文的全部内容，希望对大家的学习有所帮助！！

相关推荐：

JavaScript定义函数的三种实现方法

利用javascript如何随机生成一定位数的密码

javascript计算渐变颜色的实例

以上就是五步轻松实现JavaScript HTML时钟效果的详细内容，更多请关注Gxl网其它相关文章！