本文讲述了抖音上很火的时钟效果是怎么实现的，主要用到原生态的 js+css3，希望大家可以交流学习一下。
具体不解释了，看注释：
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>title</title> <style> html{ background: #000; color: #666; font-size: 12px; overflow:hidden; } *{ margin: 0; padding: 0; } span{ display: block; float: left; } .on{ color: #fff; } .wrapper{ width: 200px; height: 200px; position: absolute; left:50%; top:50%; margin-top: -100px; margin-left: -100px; } .wrapper .timebox{ position: absolute; width: 200px; height: 200px; top: 0; left:0; border-radius: 100%; transition: all 0.5s; } .timebox span{ transition: all 0.5s; float: left; } .wrapper .timebox span{ position: absolute; left:50%; top:50%; width: 40px; height: 18px; margin-top: -9px; margin-left: -20px; text-align: right; } </style></head><body><p id="wrapper"> <p class="timebox yuebox" id="yuebox"></p> <p class="timebox riqibox" id="riqibox"></p> <p class="timebox hourbox" id="hourbox"></p> <p class="timebox minutebox" id="minutebox"></p> <p class="timebox secondbox" id="secondbox"></p></p><script> let wrapper = document.getelementbyid(wrapper); let yuebox = document.getelementbyid(yuebox); let riqibox = document.getelementbyid(riqibox); let hourbox = document.getelementbyid(hourbox); let minutebox = document.getelementbyid(minutebox); let secondbox = document.getelementbyid(secondbox); /* * 找所有的东西标签函数 * */ let findsiblings = function( tag ){ let parent = tag.parentnode; let childs = parent.children; let sb = []; for(let i=0 ; i <= childs.length-1 ; i++){ if( childs[i]!==tag){ sb[sb.length] = childs[i]; } } return sb ; }; /* * 去掉所有兄弟的类 * */ let removesiblingclass =function( tag ){ let sb = findsiblings( tag ); for(let i=0 ; i <= sb.length-1 ; i++){ sb[i].classname = ""; } }; /* * 初始化月份函数 * */ let initmonth = function(){ for(let i=1; i<=12; i++){ let span = document.createelement("span"); span.innerhtml = i+"月"; yuebox.appendchild( span ); } }; // 初始化日期 let initdate = function(){ for(let i=1; i<=31; i++){ let span = document.createelement("span"); span.innerhtml = i+"日"; riqibox.appendchild( span ); } }; // 初始化小时，分钟，秒 let inithour = function(){ for(let i=0; i<=23; i++){ let h = i ; let span = document.createelement("span"); if( h<10){ h="0"+h; } span.innerhtml = h +"点"; hourbox.appendchild( span ); } }; let initminute = function(){ for(let i=0; i<=59; i++){ let f = i ; let span = document.createelement("span"); if( f<10){ f="0"+f; } span.innerhtml = f +"分"; minutebox.appendchild( span ); } }; let initsecond = function(){ for(let i=0; i<=59; i++){ let miao = i ; let span = document.createelement("span"); if( miao<10){ miao="0"+miao; } span.innerhtml = miao +"秒"; secondbox.appendchild( span ); } }; // 时间文字样式切换函数 let changetime = function(tag){ tag.classname = "on"; removesiblingclass( tag ); }; /* * 初始化日历函数 * */ let initrili = function(){ initmonth(); // 初始化月份 initdate(); // 初始化日期 inithour(); // 小时 initminute(); initsecond(); }; /* * 展示当前时间 * 参数：mydate 时间对象 * */ let shownow = function( mydate ){ let yue = mydate.getmonth() ; let riqi = mydate.getdate(); let hour = mydate.gethours() ; let minute = mydate.getminutes(); let second = mydate.getseconds(); // 时间文字样式切换函数 changetime( yuebox.children[yue] ); changetime( riqibox.children[riqi-1] ); changetime( hourbox.children[hour] ); changetime( minutebox.children[minute] ); changetime( secondbox.children[second] ); }; // 展示时间圆圈函数 // tag：目标 // num：数字数量 // dis：圆圈半径 let textround = function(tag,num,dis){ let span = tag.children ; for(let i=0 ; i<=span.length-1; i++){ span[i].style.transform="rotate("+ (360/span.length)*i+"deg) translatex("+dis+"px)" ; } }; /* * 旋转指定“圆圈”指定度数 * */ let rotatetag = function(tag , deg){ tag.style.transform = "rotate("+deg+"deg)"; }; let main = function(){ initrili(); // 初始化日历 setinterval(function(){ let mydate = new date(); shownow( mydate ); // 展示当前时间 },1000); // n秒后，摆出圆形 settimeout(function(){ wrapper.classname = "wrapper"; textround(yuebox,12,40); textround(riqibox,31,80); textround(hourbox,24,120); textround(minutebox,60,160); textround(secondbox,60,200); setinterval(function(){ let mydate = new date(); rotatetag( yuebox , -30*mydate.getmonth()); rotatetag( riqibox , -360/31*(mydate.getdate()-1) ); rotatetag( hourbox , -360/24*mydate.gethours()); rotatetag( minutebox , -6*mydate.getminutes()); rotatetag( secondbox , -6*mydate.getseconds()); },1000) },6000) }; main(); </script></body></html>
感谢大家的阅读，大家学会了吗？
本文转自：https://blog.csdn.net/weixin_42703239/article/details/105012665
推荐教程：《js教程》
以上就是js+css3实现时钟效果（抖音）的详细内容。