抖音短视频很火的了个时钟效果教你如何实现

直接上代码自己看具体不解释了，看注释：
  1  
  2 <!DOCTYPE html>
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Title</title>
  7     <style>
  8         html{
  9             background: #000;
 10             color: #666;
 11             font-size: 12px;
 12             overflow:hidden;
 13         }
 14         *{
 15             margin: 0;
 16             padding: 0;
 17         }
 18         span{
 19             display: block;
 20             float: left;
 21         }
 22         .on{
 23             color: #fff;
 24         }
 25         .wrapper{
 26             width: 200px;
 27             height: 200px;
 28             position: absolute;
 29             left:50%;
 30             top:50%;
 31             margin-top: -100px;
 32             margin-left: -100px;
 33         }
 34         .wrapper .timebox{
 35             position: absolute;
 36             width: 200px;
 37             height: 200px;
 38             top: 0;
 39             left:0;
 40             border-radius: 100%;
 41             transition: all 0.5s;
 42         }
 43         .timebox span{
 44             transition: all 0.5s;
 45             float: left;
 46         }
 47         .wrapper  .timebox span{
 48             position: absolute;
 49             left:50%;
 50             top:50%;
 51             width: 40px;
 52             height: 18px;
 53             margin-top: -9px;
 54             margin-left: -20px;
 55             text-align: right;
 56         }
 57  
 58     </style>
 59 </head>
 60 <body>
 61  
 62 <div id="wrapper">
 63     <div class="timebox yuebox" id="yueBox"></div>
 64     <div class="timebox riqiBox" id="riqiBox"></div>
 65     <div class="timebox hourbox" id="hourbox"></div>
 66     <div class="timebox minutebox" id="minutebox"></div>
 67     <div class="timebox secondbox" id="secondbox"></div>
 68 </div>
 69  
 70  
 71 <script>
 72  
 73     let wrapper = document.getElementById("wrapper");
 74     let yueBox = document.getElementById("yueBox");
 75     let riqiBox = document.getElementById("riqiBox");
 76     let hourbox = document.getElementById("hourbox");
 77     let minutebox = document.getElementById("minutebox");
 78     let secondbox = document.getElementById("secondbox");
 79  
 80     /*
 81     * 找所有的东西标签函数
 82     * */
 83     let findSiblings = function( tag ){
 84         let parent = tag.parentNode;
 85         let childs = parent.children;
 86         let sb = [];
 87         for(let i=0 ; i <= childs.length-1 ; i++){
 88             if( childs[i]!==tag){
 89                 sb[sb.length] = childs[i];
 90             }
 91         }
 92         return  sb ;
 93     };
 94  
 95     /*
 96     * 去掉所有兄弟的类
 97     * */
 98     let removeSiblingClass =function( tag ){
 99         let sb = findSiblings( tag );
100         for(let i=0 ;  i <= sb.length-1 ; i++){
101             sb[i].className = "";
102         }
103     };
104  
105     /*
106     * 初始化月份函数
107     * */
108     let initMonth = function(){
109       for(let i=1; i<=12; i++){
110             let span = document.createElement("span");
111             span.innerHTML = i+"月";
112             yueBox.appendChild( span );
113       }
114     };
115  
116     // 初始化日期
117     let initDate = function(){
118         for(let i=1; i<=31; i++){
119             let span = document.createElement("span");
120             span.innerHTML = i+"日";
121             riqiBox.appendChild( span );
122         }
123     };
124  
125     // 初始化小时，分钟，秒
126     let initHour = function(){
127         for(let i=0; i<=23; i++){
128             let h = i ;
129             let span = document.createElement("span");
130             if( h<10){
131                 h="0"+h;
132             }
133             span.innerHTML = h +"点";
134             hourbox.appendChild( span );
135         }
136     };
137     let initMinute = function(){
138         for(let i=0; i<=59; i++){
139             let  f = i ;
140             let span = document.createElement("span");
141             if( f<10){
142                 f="0"+f;
143             }
144             span.innerHTML = f +"分";
145             minutebox.appendChild( span );
146         }
147     };
148     let initSecond = function(){
149         for(let i=0; i<=59; i++){
150             let  miao = i ;
151             let span = document.createElement("span");
152             if( miao<10){
153                 miao="0"+miao;
154             }
155             span.innerHTML = miao +"秒";
156             secondbox.appendChild( span );
157         }
158     };
159  
160     // 时间文字样式切换函数
161     let changeTime = function(tag){
162         tag.className = "on";
163         removeSiblingClass( tag );
164     };
165  
166     /*
167     * 初始化日历函数
168     * */
169     let initRili = function(){
170         initMonth(); // 初始化月份
171         initDate(); // 初始化日期
172         initHour(); // 小时
173         initMinute();
174         initSecond();
175     };
176  
177     /*
178     * 展示当前时间
179     * 参数：mydate 时间对象
180     * */
181     let  showNow = function( mydate ){
182  
183         let yue = mydate.getMonth() ;
184         let riqi = mydate.getDate();
185         let hour = mydate.getHours()  ;
186         let minute = mydate.getMinutes();
187         let second = mydate.getSeconds();
188         // 时间文字样式切换函数
189         changeTime( yueBox.children[yue] );
190         changeTime( riqiBox.children[riqi-1] );
191         changeTime( hourbox.children[hour] );
192         changeTime( minutebox.children[minute] );
193         changeTime( secondbox.children[second] );
194  
195     };
196  
197     // 展示时间圆圈函数
198     // tag：目标
199     // num：数字数量
200     // dis：圆圈半径
201     let textRound = function(tag,num,dis){
202         let span = tag.children ;
203         for(let i=0 ; i<=span.length-1; i++){
204             span[i].style.transform="rotate("+ (360/span.length)*i+"deg)  translateX("+dis+"px)" ;
205         }
206     };
207     /*
208     * 旋转指定“圆圈”指定度数
209     * */
210     let rotateTag = function(tag , deg){
211         tag.style.transform = "rotate("+deg+"deg)";
212     };
213  
214     let main = function(){
215         initRili(); // 初始化日历
216  
217         setInterval(function(){
218             let mydate = new Date();
219             showNow( mydate ); // 展示当前时间
220         },1000);
221  
222         //  n秒后，摆出圆形
223         setTimeout(function(){
224             wrapper.className = "wrapper";
225             textRound(yueBox,12,40);
226             textRound(riqiBox,31,80);
227             textRound(hourbox,24,120);
228             textRound(minutebox,60,160);
229             textRound(secondbox,60,200);
230             setInterval(function(){
231                 let mydate = new Date();
232                 rotateTag( yueBox , -30*mydate.getMonth());
233                 rotateTag( riqiBox , -360/31*(mydate.getDate()-1) );
234                 rotateTag( hourbox , -360/24*mydate.getHours());
235                 rotateTag( minutebox , -6*mydate.getMinutes());
236                 rotateTag( secondbox , -6*mydate.getSeconds());
237             },1000)
238         },6000)
239  
240     };
241     main();
242    
243 </script>
244  
245 </body>
246 </html>
posted @ 2020-06-12 15:15 逍-遥阅读(1493) 评论(0) 编辑收藏举报
会员力量，点亮园子希望
刷新页面返回顶部
逍遥知道

抖音短视频很火的了个时钟效果教你如何实现

公告
