跟我学用五步制作漂亮精致的HTML时钟

时间：2023-03-30 23:48:45 CSS

跟着我五步制作一个漂亮精致的HTML时钟重点是：CSS3动画、DOM操作、定时器、点坐标计算（有很多人还给老师了~）一、准备HTML首先，我们要准备HTML结构，背景，表盘，指针（时针，分针，秒针），数字。

2.准备CSS来定义指针的颜色和大小。需要说明的是transform:rotate(-90deg);用于旋转指针，transform-origin:06px;用于设置旋转中心点。<样式>*{边距：0;填充：0；}#clock{保证金：5%自动；宽度：400px；高度：400px；边界半径：10px；背景：#aaa；位置：相对；变换：旋转（-90度）；}#clock.bg{宽度：360px；身高：360像素;边界半径：50%；背景：#fff；位置：绝对；左：50%；顶部：50%；左边距：-180px；边距顶部：-180px；}#clock.point{位置：绝对；左：50%；顶部：50%；左边距：-14px；边距顶部：-14px；}#clock#hour{宽度：80px；高度：16px；背景：#000；边距：6px0014px；/*变换：旋转（30度）；*/变换原点：08px；/*animation:hour3slinear100!*alternate*!;*/border-radius:16px;}#clock#minute{宽度：120px；高度：12px；背景：#000；边距：-14px0014px；变换原点：06px；边界半径：12px；}#clock#second{宽度：160px；高度：6px；背景：#f00；边距：-9px0014px；变换原点：03px；边界半径：6px；}#clock.point.circle{宽度：28px；高度：28px；边界半径：50%；背景：#000；位置：绝对；左：0;顶部：0；}@keyframeshour{从{transform:rotate(0deg);}到{transform:rotate(deg);}}#clock.number{position:absolute;字体大小：34px；宽度：50px；高度：50px；行高：50px；文本对齐：居中；变换：旋转（90度）；3.计算时针的位置JS通过Date对象获取当前时间，getHours获取小时，getMinutes获取分钟，getSeconds获取秒。时针旋转12格，每格的角度为360°/12。分秒均为60格，每格的角度为360°/60。functionclock(){vardate=newDate();//获取当前时间//时(0-23)分(0-59)秒(0-59)//计算旋转角度varhourDeg=date.getHours()*360/12;varminuteDeg=date.getMinutes()*360/60;varsecondDeg=date.getSeconds()*360/60;//console.log(hourDeg,minuteDeg,secondDeg);//设置指针hour.style.transform='rotate('+hourDeg+'deg)';minute.style.transform='rotate('+minuteDeg+'deg)';second.style.transform='rotate('+secondDeg+'deg)';}4.时钟旋转通过setInterval设置定时器，每秒刷新一次。注意需要初始化一次，否则1s后才能看到效果。//初始化并执行一次clock();设置间隔（时钟，1000）；5.绘制数字时间数字时间也是在一个圆上，我们只需要确定半径，然后得到半径上的坐标即可。将每个数字放在左边就可以了。看一下圆坐标系的计算规则：圆半径坐标计算：=pointX+r*cos(angle);=pointY+r*sin(angle);但是要注意，我们计算的坐标是圆弧上的点的坐标，当定位每一个数字的时候，都是定位在元素的左上角，这样我们的数字就会发生偏移。也就是说，数的中心点不在圆弧上。解决方法是将坐标点(x,y)平移自身的一半(x-w/2,y-h/2)，使数的中心点在圆弧上。变种点X=200;变种点Y=200;变量r=150；functiondrawNumber(){vardeg=Math.PI*2/12;//360°for(vari=1;i<=12;i++){//计算每个网格的角度varangle=deg*i;//计算圆上的坐标varx=pointX+r*Math.cos(angle);vary=pointY+r*Math.sin(角度);//创建div，写入数字varnumber=document.createElement('div');number.className='number';number.innerHTML=i;//自己减去一半，使div的中心点在圆弧上number.style.left=x-25+'px';number.style.top=y-25+'px';//添加到页面myClock.appendChild(number);}}完整的JS代码：

上一篇：让网页兼容各大浏览器常用的常用CSS

下一篇：padding-bottom实现图片自适应

跟我学用五步制作漂亮精致的HTML时钟相关文章