一. 实现效果
二. 代码展示
1. html部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jianbianshizhong</title>
<link rel="stylesheet" href="css/jianbian.css">
</head>
<body>
<div class="outest">
<span></span>月
<span></span>日
<span></span>时
<span></span>分
<span></span>秒
</div>
</body>
</html>
<script src="js/jianbian.js"></script>
2. css部分:
* {
box-sizing: content-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
background: rgb(0, 0, 0);
display: flex;
}
.outest {
background: rgb(0, 0, 0);
width: 90vw;
height: 50vh;
margin: auto;
font-size: 13vh;
line-height: 50vh;
text-align: center;
}
3. js部分:
let time = document.getElementsByTagName('span');
// 初始化rgb的值
let r = 0,g = 0,b = 0;
// 整体思路是先设置一个开关 当某一个色值大于255时,后续使之变小,小于0时,后续让色值变大
let rflag = true,gflag = true,bflag = true;
// 避免刚开启页面时的尬
getTimes();
document.getElementsByClassName('outest')[0].style.color = waveColor();
// 这俩定时器分别控制时间走势和颜色
setInterval(() => {getTimes()}, 1000);
setInterval(()=>{document.getElementsByClassName('outest')[0].style.color = waveColor()},10)
// 经典时间渲染部分
function getTimes() {
time[0].innerText = new Date().getMonth() + 1;
time[1].innerText = new Date().getDate();
time[2].innerText = new Date().getHours();
time[3].innerText = new Date().getMinutes();
time[4].innerText = new Date().getSeconds();
}
// 渐变色部分(用最开始设置的那个开关来控制增加或减少)
function waveColor() {
if(r>=255){rflag = false}else if(r<=0){rflag = true};
if(g>=255){g=255;gflag = false}else if(g<=0){g=0;gflag = true};
if(b>=255){b=255;bflag = false}else if(b<=0){b=0;bflag = true};
if (rflag){r++}else{r--};
if (gflag){g+=2;if(g>=255){g=255;}}else{g-=2;if(g<=0){g=0}};
if (bflag){b+=3;if(b>=255){b=255;}}else{b-=3;if(b<=0){b=0}};
return `rgb(${r},${g},${b})`;
}
抓紧动手试起来吧!