文章来源地址https://www.toymoban.com/news/detail-579251.html
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<meta name="referrer" content="no-referrer">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1,maximum-scale=1">
<meta HTTP-EQUIV="pragma" content="no-cache">
<meta HTTP-EQUIV="Cache-Control" content="no-cache, must-revalidate">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta HTTP-EQUIV="expires" content="0">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;900&display=swap" rel="stylesheet">
</head>
<style>
html{
background: #000;
color: #4f4f4f;
font-size: 1em;
overflow:hidden;
font-weight: bold;
}
*{
margin: 0;
padding: 0;
}
span{
display: block;
float: left;
}
.on{
color: #d0d0d0;
}
.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;
left:0;
top: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>
<body>
<div id="wrapper">
<div class="timebox nianBox" id="nianBox"></div>
<div class="timebox yuebox" id="yueBox"></div>
<div class="timebox riqiBox" id="riqiBox"></div>
<div class="timebox hourbox" id="hourbox"></div>
<div class="timebox minutebox" id="minutebox"></div>
<div class="timebox secondbox" id="secondbox"></div>
</div>
<script>
let wrapper = document.getElementById("wrapper");
let nianBox = document.getElementById("nianBox");
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 initYear = function(){
let date = new Date();
let span = document.createElement("span");
span.innerHTML = date.getUTCFullYear();
span.className = "on";
nianBox.appendChild(span);
};
/*
* 初始化月份函数
* */
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(){
initYear();
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(nianBox,4,0);
textRound(yueBox,12,70);
textRound(riqiBox,31,140);
textRound(hourbox,24,210);
textRound(minutebox,60,280);
textRound(secondbox,60,350);
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)
// },1000)
};
main();
</script>
</body>
</html>
文章来源：https://www.toymoban.com/news/detail-579251.html
到了这里，关于存css实现动态时钟背景的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
