抖音短视频很火的了个时钟效果教你如何实现
直接上代码自己看 具体不解释了，看注释：
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>