console
var mday=[31,28,31,30,31,30,31,31,30,31,30, 31];
var date = new Date();
var m = Number(date.getMonth()) + 1
var day = date.getDate();
var hours = date.getHours();
var mu = date.getMinutes();
var s = date.getSeconds();
var rotateDeg = [0, 0,0,0,0,0];
var rotateS = [360/12, 360/(mday[m]-1), 360/24, 360/60, 360/60];
var startDate = [m, day, hours, mu, s];
var createMonth = function(){
var mStr = ""
var r = 360/12;
for(var i = 0; i < 12; i++){
mStr+='<div class="month" >'+(i+1)+'月</div>'
}
$(".mpage").append(mStr);
var aniMonth = function(){
for(var i = 0; i < 12; i++){
$(".month").eq(i).css("transform", "rotate("+rotateS[0]*i+"deg)");
}
}
setTimeout(function(){ aniMonth(); }, 100);
}
createMonth();
var createDate = function(){
var mStr = ""
var r = 360/(mday[m]-1);
for(var i = 0; i < (mday[m]-1); i++){
mStr+='<div class="date" >'+(i+1)+'日</div>'
}
$(".dpage").append(mStr);
var aniDate = function(){
for(var i = 0; i < (mday[m]-1); i++){
$(".date").eq(i).css("transform", "rotate("+rotateS[1]*i+"deg)");
}
}
setTimeout(function(){ aniDate(); }, 1100);
}
createDate();
var createHours = function(){
var mStr = ""
var r = 360/24;
for(var i = 0; i < 24; i++){
mStr+='<div class="hour" >'+(i)+'时</div>'
}
$(".hpage").append(mStr);
var aniHours = function(){
for(var i = 0; i < 24; i++){
$(".hour").eq(i).css("transform", "rotate("+rotateS[2]*i+"deg)");
}
}
setTimeout(function(){ aniHours(); }, 2100);
}
createHours();
var createMiun = function(){
var mStr = ""
var r = 360/60;
for(var i = 0; i < 60; i++){
mStr+='<div class="min" >'+(i)+'分</div>'
}
$(".minpage").append(mStr);
var aniHours = function(){
for(var i = 0; i < 60; i++){
$(".min").eq(i).css("transform", "rotate("+rotateS[3]*i+"deg)");
}
}
setTimeout(function(){ aniHours(); }, 3100);
}
createMiun();
var createSec = function(){
var mStr = ""
var r = 360/60;
for(var i = 0; i < 60; i++){
mStr+='<div class="sec" >'+(i)+'s</div>'
}
$(".spage").append(mStr);
var aniHours = function(){
for(var i = 0; i < 60; i++){
$(".sec").eq(i).css("transform", "rotate("+rotateS[4]*i+"deg)");
}
}
setTimeout(function(){ aniHours(); }, 4100);
}
createSec();
setTimeout(function(){ startAuto(); }, 5100);
var startAuto = function(){
rotateDeg[0] = -(m-1) * rotateS[0];
rotateDeg[1] = -(day-1) * rotateS[1];
rotateDeg[2] = -hours * rotateS[2];
rotateDeg[3] = -mu * rotateS[3];
rotateDeg[4] = -s * rotateS[4];
for(var i = 0; i < 5; i++){
$(".page").eq(i).css("transform", "rotate("+rotateDeg[i]+"deg)");
$(".sec").eq(startDate[4]%60).css("color", "#fff");
$(".min").eq(startDate[3]%60).css("color", "#fff");
$(".hour").eq(startDate[2]%24).css("color", "#fff");
$(".date").eq(startDate[1]%(mday[m]-1)-1).css("color", "#fff");
$(".month").eq((startDate[0]-1)%12).css("color", "#fff");
}
$(".br").css("transform", "translateX(0%)")
setInterval(function(){
rotateDeg[4] = rotateDeg[4]-rotateS[4];
$(".sec").eq(startDate[4]%60).css("color", "#333");
startDate[4] +=1;
$(".sec").eq(startDate[4]%60).css("color", "#fff");
$(".page").eq(4).css("transform", "rotate("+rotateDeg[4]+"deg)");
if(rotateDeg[4]%360 == 0 || startDate[4]%60 == 0){
rotateDeg[3]=rotateDeg[3]-rotateS[3];
$(".min").eq(startDate[3]%60).css("color", "#333");
startDate[3] +=1;
$(".min").eq(startDate[3]%60).css("color", "#fff");
$(".page").eq(3).css("transform", "rotate("+rotateDeg[3]+"deg)");
if(rotateDeg[3]%360 == 0 || startDate[3]%60 == 0){
rotateDeg[2]=rotateDeg[2]-rotateS[2];
$(".hour").eq(startDate[2]%24).css("color", "#333");
startDate[2] +=1;
$(".hour").eq(startDate[2]%24).css("color", "#fff");
$(".page").eq(2).css("transform", "rotate("+rotateDeg[2]+"deg)");
if(rotateDeg[2]%360 == 0 || startDate[2]%24 == 0){
rotateDeg[1]=rotateDeg[1]-rotateS[1];
$(".date").eq(startDate[1]%(mday[m]-1)).css("color", "#333");
startDate[1] +=1;
$(".date").eq(startDate[1]%(mday[m]-1)).css("color", "#333");
$(".page").eq(1).css("transform", "rotate("+rotateDeg[1]+"deg)");
if(rotateDeg[1]%360 == 0 || startDate[1]%(mday[m]-1) == 0){
rotateDeg[0]=rotateDeg[0]-rotateS[0];
$(".month").eq(startDate[0]%12).css("color", "#333");
startDate[0] +=1;
$(".month").eq(startDate[0]%12).css("color", "#fff");
$(".page").eq(0).css("transform", "rotate("+rotateDeg[0]+"deg)");
}
}
}
}
}, 1000)
}
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
$("#powered",parent.document).hide();
$("#exampleTop",parent.document).hide();
}
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.0/jquery.min.js"></script>
<script>
var w_resize = function(){
var w_fontsize = document.documentElement.clientWidth/750 * 100;
if(w_fontsize > 100){w_fontsize = 100}
document.documentElement.style.fontSize = w_fontsize+"px";
}
w_resize();
window.onresize = w_resize;
</script>
<div class="main" >
<div class="year">2022年
<div class="br"></div>
</div>
<div class="page mpage"></div>
<div class="page dpage"></div>
<div class="page hpage"></div>
<div class="page minpage"></div>
<div class="page spage"></div>
</div>
*{margin:0;padding:0}
.main{
width: 7.5rem;
height: 7.5rem;
background: #999;
overflow: hidden;
position: relative;
font-size: 0.14rem;
margin: auto;
}
.page{
width: 7.5rem;
height: 7.5rem;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s linear;
}
.year{
width: 4.03rem;
height: 0.4rem;
color: #fff;
text-align: right;
line-height: 0.4rem;
margin-top: 3.55rem;
position: relative;
overflow: hidden;
}
.year::after{
content:"";
position: absolute;
bottom: 0;
height: 1px;
}
.month{
width: 2rem;
height: 0.4rem;
top: 3.55rem;
left: 2.75rem;
line-height: 0.40rem;
position: absolute;
transition: all 1s linear;
}
.date{
width: 3rem;
height: 0.40rem;
top: 3.55rem;
left: 2.25rem;
line-height: 0.40rem;
position: absolute;
transition: all 1s linear;
}
.hour{
width: 4rem;
height: 0.40rem;
top: 3.55rem;
left: 1.75rem;
line-height: 0.40rem;
position: absolute;
transition: all 1s linear;
}
.min{
width: 5rem;
height: 0.40rem;
top: 3.55rem;
left: 1.25rem;
line-height: 0.40rem;
position: absolute;
transition: all 1s linear;
}
.sec{
width: 6rem;
height: 0.40rem;
top: 3.55rem;
left: 0.75rem;
line-height: 0.40rem;
position: absolute;
transition: transform 1s linear;
}
.br{
position: absolute;
z-index: 999;
bottom: 0.06rem;
right: 0rem;
height: 1px;
width: 3.34rem;
background: #fff;
transform: translateX(100%);
transition: all 0.5s linear 0.5s;
}