【JS30-WesBos】实时显示时钟页面02

时间：2023-03-27 14:54:03 JavaScript

标题：【原生javascript项目】实时时钟02日期：2021-11-1214:46:15标签：原生javascript项目分类：30个原生javascript项目本文介绍使用javascript编写一个实时时钟特效网页。网址为(https://janice143.github.io/r...)正文1网页布局及功能网页主体是一个带有表盘（12个数字）和三个指针（时、分）的时钟，第二）。2实现原理1、html代码使用类名为clock的div容器，其中包含时针.时针，分针.分针，秒针秒针，12个数字。

121234567891011

二、css代码1让时钟显示在页面中间（垂直居中，水平居中），可以在时钟的上字main中设置flex容器#main{显示：弹性；最小高度：100vh；对齐项目：居中；justify-content:center;}2Clockdialstyle.clock{宽度：300px;高度：300px；边界半径：300px；边框：20px纯白色；position:relative;}3指针的样式指针旋转的特效是通过transfrom:rotate(deg)实现的（本文后面通过js代码设置）。transform-origin的默认值为50%，元素将围绕中间旋转。当它设置为100%时，元素将围绕一端旋转。transition-timing-function是设置transition的时间函数效果，不设置则默认均匀transition。.hand{宽度：120px;高度：6px；背景色：蓝紫色；位置：绝对；顶部：148px；右：148px；变换原点：100%；过渡：全部0.05s；bezier(0.1,2.7,0.58,1);}.hour-hand{width:100px;}.second-hand{height:4px;}412个数字的样式首先设置数字的相对定位，相对于上一级。数字。然后给每个数字设置对应的top和left。数位算法为：num=2；top=135sin((num-3)30/180pi)+135;left=135cos((num-3)30/180pi)+135（num是1-12之间的数字）.number{width:300px;高度：300px；字体大小：15px；位置：绝对；顶部：0px；分秒针的类名，然后通过当前时间给三只手分配正确的旋转角度。1秒针：parseInt(second/60*360)+90；2分针：parseInt(minute/(60)*360+second/10)+90；3时针：parseInt(hour/(12)360+minute/(60)30)+90;+90度是因为设置指针css样式时，指针指向9点钟位置，而+90度可以使指针以12点钟为起点旋转。设置好指针的角度后，利用定时器每秒刷新一次指针的位置，这样就可以达到实时显示的效果。指针转一圈后，再次运行设置时间函数setDate()，重新设置指针角度。//获取指针的变换样式，使其可以旋转constsecondHand=document.querySelector('.second-hand');constminuteHand=document.querySelector('.minute-hand');consthourHand=document.querySelector('.hour-hand');constaudio=document.querySelector('音频');//获取当前时间，从时间函数中设置指针setDate(){consttime=newDate();constsecond=time.getSeconds();constsecondDeg=parseInt(second/60*360)+90;secondHand.style.transform=`rotate(${secondDeg}deg)`;constminute=time.getMinutes();constminuteDeg=parseInt(分/(60)*360+秒/10)+90;minuteHand.style.transform=`rotate(${minuteDeg}deg)`;consthour=time.getHours();consthourDeg=parseInt(小时/(12)*360+分钟/(60)*30)+90;hourHand.style.transform=`rotate(${hourDeg}deg)`;}//设置定时器每隔一秒刷新一次页面setInterval(setD吃了，1000）；//设置日期（）;//当指针转一圈时，重置度数摘要完整代码放在Github上，有兴趣的读者不妨试一试

上一篇：React系列十：受控组件与非受控组件

下一篇：可视化构建-组件值验证

【JS30-WesBos】实时显示时钟页面02相关文章