彩色动态时钟

最新推荐文章于 2024-09-21 11:29:05 发布

Seven.hh

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量46

点赞数

分类专栏：炫酷前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_73505782/article/details/132837769

版权

炫酷前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一. 实现效果

二. 代码展示

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})`;
}

抓紧动手试起来吧！