效果图：
HTML代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="body">
<div class="information">
<div class="Time">
<div class="box one">
<span style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: rgba(66,70,66,0.65);font-style: italic;"></span>
</div>
<div class="box one">
<span style="font-size: 26px;font-weight: 600;font-family: sans-serif;font-style: italic;color: rgba(56,58,56,0.75);"></span>
</div>
</div>
<div class="location">
<div class="box one">
<span style="font-size: 20px;color: rgba(123,175,136,0.84);font-weight: 600;font-style: italic;"></span>
<span style="font-size: 14px;color: rgba(94,224,164,0.93);font-weight: 600;font-style: italic;"></span>
<span style="font-size: 14px;color: #40b277;font-weight: 600;font-style: italic;"></span>
<img src="./assets/images/飞机.png" alt="" style="width: 48px;height: 48px;position: absolute;right: 25px;bottom: 10px">
</div>
</div>
<div class="lucky">
<p style="font-size: 14px;height: 18px;margin: 5px 5px;font-weight: 600;font-style: italic;">系统使用情况
</p>
<div class="detail one">
<div class="text">
<span id="Main" style="font-family: cursive;bottom: 5px;"></span>
<span id="Rely" style="font-family: cursive;bottom: 5px;"></span>
</div>
</div>
</div>
<div class="progress">
<div class="box one">
<p>
<span style="font-size: 12px;font-weight: 600" data-index="65">Codeforces</span>
<span class="index"></span>
</p>
<p>
<span style="font-size: 12px;font-weight: 600" data-index="55">51nod</span>
<span class="index"></span>
</p>
<p>
<span style="font-size: 12px;font-weight: 600" data-index="40">LintCode</span>
<span class="index"></span>
</p>
<p>
<span style="font-size: 12px;font-weight: 600" data-index="20">POJ</span>
<span class="index"></span>
</p>
</div>
</div>
<div class="avatar">
<div class="logo">
<img src="./assets/images/avatar.png" alt="">
</div>
</div>
</div>
<div class="next" >
<img src="./assets/images/路标.png" alt="" style="width: 22px;height: 22px;margin-left: 20px;margin-top: 9px">
<ul >
<li><span></span><span></span></li>
<li><span></span><span></span></li>
<li><span></span><span></span></li>
<li><span></span><span></span></li>
<li><span></span><span></span></li>
<li><span></span><span></span></li>
<li><span></span><span></span></li>
<li><span></span><span></span></li>
<li><span></span><span></span></li>
<li><span></span><span></span></li>
</ul>
</div>
<div class="left-body">
<div class="view">
<img src="./assets/images/1709098789073.jpg" alt="">
</div>
<div class="note">
<p style="font-size: 16px;font-weight: 600;position: absolute;left: 15px;top:5px;font-style: italic;color: rgba(66,70,66,0.65);height: 20px;margin: 0">记事板</p>
<div class="box one">
<div class="innerBox one">
<span style="font-size: 16px;font-weight: 600;font-family: sans-serif;color: rgba(66,70,66,0.65);font-style: italic;margin-left: 10px;">哦，又幸福了！！</span>
</div>
<div class="innerBox one">
<span style="font-size: 16px;font-weight: 600;font-family: sans-serif;color: rgba(66,70,66,0.65);font-style: italic;margin-left: 10px;">没事做，看看腿吧！！</span>
</div>
<div class="innerBox one">
<span style="font-size: 16px;font-weight: 600;font-family: sans-serif;color: rgba(66,70,66,0.65);font-style: italic;margin-left: 10px;">原神，启动！！</span>
</div>
</div>
</div>
</div>
<div class="middleBody">
<div class="rank">
<div>
<p>道祖</p>
<p>大罗</p>
<p>太乙</p>
<p>金仙</p>
<p>真仙</p>
<p>大乘</p>
<p>合体</p>
<p>炼虚</p>
<p>化神</p>
<p>元婴</p>
<p>结丹</p>
<p>筑基</p>
<p>炼气</p>
</div>
<div class="box one">
<div class="pro"></div>
</div>
</div>
</div>
<div class="rightBody">
<div class="calendar">
<p style=" font-size: 20px;font-weight: 600;font-style: italic;color: rgba(47, 49, 47, 0.86);margin: 0;position: absolute;top: 8px ">签到打卡</p>
<div class="list" >
</div>
</div>
<div class="project">
<p style="position: absolute;top: 5px;font-size: 20px;font-weight: 600;font-family: sans-serif;color: rgba(66,70,66,0.65);font-style: italic;left: 10px;margin: 0">开发进度</p>
<div style="display: flex;flex-direction: column;justify-content: space-around;position: absolute;left: 15px;width: 90%;height: 60%;bottom: 5%;text-align: left">
<div style="display: flex;"><p style="font-size: 16px;font-weight: 600;font-family: sans-serif;color: rgba(66,70,66,0.65);font-style: italic;margin: 0">登录逻辑和后台页面UI </p> <el-button type="success" :icon="Check" circle style="margin-left: 20px;width: 20px;height: 20px" /></div>
<div style="display: flex;"><p style="font-size: 16px;font-weight: 600;font-family: sans-serif;color: rgba(66,70,66,0.65);font-style: italic;margin: 0">后端接口编写 </p> <el-button type="info" :icon="Edit" circle style="margin-left: 20px;width: 20px;height: 20px" /></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
function getTime(){
let time = new Date();
var Weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
Year = time.getFullYear();
Month = time.getMonth()+1;
Day = time.getDate();
Hours = time.getHours();
Minutes = time.getMinutes();
Seconds = time.getSeconds();
WeekDay = Weeks[time.getDay()]
var NowTime = {
Year:Year,
Month:Month,
Day:Day,
Hours:Hours,
Minutes:Minutes,
Seconds:Seconds,
WeekDay:WeekDay
}
document.querySelector(".information>.Time>.box>span").textContent = `${NowTime.Year}/${NowTime.Month}/${NowTime.Day}`
document.querySelector(".information>.Time>.box:nth-child(2)>span").textContent = `${NowTime.Hours}:${padZero(NowTime.Minutes)}:${padZero(NowTime.Seconds)}`
}
setInterval(() => {
getTime()
}, 1000);
// 时间格式化
function padZero(n) {
return n > 9 ? n : "0" + n
}
// 天气查询函数(可以去高德控制台注册)
const key = "";
const apiUrl = "https://restapi.amap.com/v3/weather/weatherInfo?city=";
const city = "长沙"
fetch(apiUrl + city + `&key=${key}`)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
var WeatherData = data['lives'][0]
document.querySelector(".location>.box>span:nth-child(1)").textContent = WeatherData.city;
document.querySelector(".location>.box>span:nth-child(2)").textContent = WeatherData.temperature + '°C';
document.querySelector(".location>.box>span:nth-child(3)").textContent = WeatherData.weather;
console.log(WeatherData);
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
function RandomIndex(){
var index = 20 + Math.floor(Math.random()*50);
document.querySelector("#Main").textContent = ` Main:${index}%`
document.querySelector("#Rely").textContent = `Rely:${90 + index}`
}
RandomIndex()
setInterval(() => {
RandomIndex()
}, 3000);
// 进度条颜色
const Colors = [
'#FF8066',
'#845EC2',
'#008CCB',
'#008B74'
]
var Progresses = document.querySelectorAll(".progress>.box>p>span:nth-child(1)")
var ProgressIndexes = document.querySelectorAll(".progress>.box>p>span:nth-child(2)")
for(var i = 0;i<Progresses.length;i++){
console.log(Progresses[i].dataset['index']);
ProgressIndexes[i].style.width = `${(Progresses[i].dataset['index'])*0.85}%`
ProgressIndexes[i].style.backgroundColor = ColorsRight(Progresses[i].dataset['index']);
}
function ColorsRight(n){
if( n <= 20) return Colors[0];
if( 20 < n && n <= 40) return Colors[1];
if( 40 < n && n <= 60) return Colors[2];
if( 60 < n && n <= 80) return Colors[3];
if( n > 80) return Colors[4];
}
const Words = [
{"author":"@SuperDragon","content":"那年，我双手插兜，不知道什么叫对手！！"},
{"author":"@SuperDragon","content":"一直以来规规矩矩吃饭，老老实实睡觉，党的接班人，祖国的花朵，就是我宇宙超级无敌暴龙战士！！"},
{"author":"@SuperDragon","content":"有山名浪浪，身山不识山，故行而上者，登顶而望景，临崖以观海！！"},
{"author":"@SuperDragon","content":"为中国人民谋幸福，为中华民族谋复兴！！"},
{"author":"@SuperDragon","content":"君子藏器于身，待时而动，以钝示人，以锋策己，藏锋慰忠骨，出鞘镇山河，君子不动，非不能也！！"},
{"author":"@SuperDragon","content":"昨天，我认识了一个女孩，她和我聊音乐，聊电影，聊文学，聊人生，聊理想，今天，她跟我聊起了她卖茶的爷爷！！"},
{"author":"@SuperDragon","content":"无气不顺，无脉不通，无所不顾。神阙，水分，下脘，建里，中脘，鸠尾，中庭，膻中，玉堂！！"},
{"author":"@SuperDragon","content":"对不起，老师，我太想进步了！！"},
{"author":"@SuperDragon","content":"追女生追不上，你要及时止损，别听她们说什么考验你，记住了，在我们国家，只有党和人民才有资格考验你！！"},
{"author":"@SuperDragon","content":"幸福的中国人民深情惦记着生活在水深火热中的美国人民！！"},
]
const WordsBoxs = document.querySelectorAll(".next>ul>li>span:nth-child(1)")
const WordsAuthors = document.querySelectorAll(".next>ul>li>span:nth-child(2)")
console.log(WordsBoxs);
for(var i = 0;i<WordsBoxs.length;i++){
WordsBoxs[i].textContent = Words[i].content
WordsAuthors[i].textContent = "-------" + Words[i].author
}
let slideUl = document.querySelector(".next>ul")
console.log(slideUl);
let count = -1;
function animate(){
if(slideUl){
count++;
if(count == 10) {
count = -1;
slideUl.style.transition = "none";
slideUl.style.marginTop = "0px";
}
else{
slideUl.style.transition = ".6s ease";
slideUl.style.marginTop = `-${count*40}px`;
}
}
}
setInterval(animate,3000)
var ClList = document.querySelector(".calendar>.list");
for(var i = 0;i<60;i++){
var span = document.createElement('span')
if((i+5)%4 == 0 || (i+2)%3 == 1){
span.className = 'active'
}
ClList.appendChild(span)
}
</script>
</html>css代码如下：
* {
margin: 0;
padding: 0;
}
.container {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 100vh;
width: 100vw;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
}
.container .body {
width: 100%;
background-color: rgb(232, 236, 241);
box-shadow: inset 2px 2px 5px rgba(206, 197, 197, 0.48), inset -3px -3px 5px rgba(210, 206, 206, 0.85);
}
.container .body .information {
margin-top: 10px;
position: absolute;
left: 10%;
width: 85%;
height: 150px;
background-color: rgb(232, 236, 241);
display: flex;
justify-content: space-around;
align-items: center;
}
.container .body .information .Time {
width: 160px;
height: 90%;
display: flex;
flex-direction: column;
border-radius: 15px;
margin: 10px 0;
justify-content: center;
}
.container .body .information .Time .box {
background-color: rgb(232, 236, 241);
justify-content: center;
display: flex;
align-items: center;
height: 40px;
border-radius: 10px;
margin: 10px 0;
}
.container .body .information .Time .one {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3), -3px -3px 5px rgba(255, 255, 255, 0.7);
}
.container .body .information .location {
width: 220px;
height: 90%;
border-radius: 15px;
background-color: rgb(232, 236, 241);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -3px -3px 5px rgba(255, 255, 255, 0.7);
}
.container .body .information .location .box {
position: relative;
background-color: rgb(232, 236, 241);
display: flex;
flex-direction: column;
justify-content: center;
height: 85%;
width: 90%;
margin: 5%;
border-radius: 10px;
}
.container .body .information .location .one {
box-shadow: inset 2px 2px 5px rgb(210, 206, 206), inset -3px -3px 5px rgb(255, 255, 255);
}
.container .body .information .location span {
margin: 2px 10px;
}
.container .body .information .lucky {
position: relative;
width: 170px;
height: 90%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
border-radius: 15px;
background-color: rgb(232, 236, 241);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -3px -3px 5px rgba(255, 255, 255, 0.7);
}
.container .body .information .lucky .detail {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 90%;
margin: 5% 5%;
border-radius: 10px;
}
.container .body .information .lucky .detail .text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.container .body .information .lucky .detail .text span {
margin: 5px;
font-size: 16px;
}
.container .body .information .lucky .one {
box-shadow: inset 2px 2px 5px rgb(210, 206, 206), inset -3px -3px 5px rgb(255, 255, 255);
}
.container .body .information .progress {
width: 280px;
height: 90%;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3), -3px -3px 5px rgba(255, 255, 255, 0.7);
}
.container .body .information .progress .box {
background-color: rgb(232, 236, 241);
height: 90%;
width: 90%;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
}
.container .body .information .progress .box p {
position: relative;
width: 95%;
height: 20px;
margin: 5px 5px;
white-space: nowrap;
display: flex;
align-items: center;
}
.container .body .information .progress .box p span:nth-child(1) {
width: 60px;
}
.container .body .information .progress .box p .index {
position: relative;
width: 60%;
height: 10px;
border-radius: 20px;
margin-left: 20px;
}
.container .body .information .progress .box span {
margin-left: 5px;
font-family: cursive;
font-style: italic;
}
.container .body .information .progress .one {
box-shadow: inset 2px 2px 5px rgba(206, 197, 197, 0.48), inset -3px -3px 5px rgba(210, 206, 206, 0.85);
}
.container .body .information .avatar {
right: 10%;
height: 90%;
width: 100px;
display: flex;
justify-content: center;
}
.container .body .information .avatar .logo {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
margin: 10px;
overflow: hidden;
}
.container .body .information .avatar .logo img {
width: 100%;
height: 100%;
}
.container .body .next {
width: 83%;
height: 40px;
position: relative;
background-color: rgb(232, 236, 241);
top: 25%;
left: 10%;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3), -3px -3px 5px rgba(255, 255, 255, 0.7);
border-radius: 15px;
display: flex;
overflow: hidden;
}
.container .body .next ul {
width: 100%;
z-index: 999;
display: flex;
flex-direction: column;
line-height: 40px;
list-style: none;
height: 1000%;
margin: 0;
transition: 0.6s ease;
}
.container .body .next ul li {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.container .body .next ul li span:nth-child(1) {
margin-left: 10px;
}
.container .body .next ul li span {
font-style: italic;
font-size: 16px;
margin-right: 15px;
font-weight: 500;
font-family: cursive;
}
.container .body .left-body {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 35%;
width: 28%;
left: 9%;
height: 64vh;
background-color: rgb(232, 236, 241);
border-radius: 10px;
}
.container .body .left-body .view {
width: 95%;
height: 45%;
margin-top: 10px;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 5px rgba(255, 255, 255, 0.83);
display: flex;
justify-content: center;
align-items: center;
}
.container .body .left-body .view img {
width: 95%;
height: 96%;
border-radius: 10px;
}
.container .body .left-body .note {
width: 95%;
height: 50%;
position: relative;
margin-top: 10px;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -3px -5px 5px rgba(255, 255, 255, 0.83);
display: flex;
align-items: center;
justify-content: center;
}
.container .body .left-body .note .box {
position: absolute;
height: 80%;
width: 90%;
border-radius: 10px;
bottom: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.container .body .left-body .note .box .innerBox {
position: relative;
height: 40px;
width: 90%;
border-radius: 10px;
margin: 10px 0;
display: flex;
align-items: center;
}
.container .body .left-body .note .one {
box-shadow: inset -3px -3px 5px rgba(255, 255, 255, 0.7), inset 3px 3px 5px rgba(65, 60, 60, 0.39);
}
.container .body .middleBody {
top: 35%;
width: 12%;
left: 40%;
height: 64vh;
position: absolute;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -3px -5px 5px rgba(255, 255, 255, 0.83);
}
.container .body .middleBody .rank {
margin-left: 10px;
height: 95%;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
}
.container .body .middleBody .rank div {
display: flex;
flex-direction: column;
justify-content: space-around;
text-align: center;
height: 100%;
width: 40%;
}
.container .body .middleBody .rank div p {
font-size: 16px;
font-weight: 600;
font-style: italic;
color: rgba(47, 49, 47, 0.86);
margin: 0;
}
.container .body .middleBody .rank .box {
position: relative;
background-color: rgb(232, 236, 241);
height: 100%;
width: 55%;
border-radius: 10px;
margin-right: 5px;
}
.container .body .middleBody .rank .box .pro {
height: 15%;
width: 100%;
background-color: #8ad3ab;
position: absolute;
bottom: 0;
border-radius: 0 0 10px 10px;
}
.container .body .middleBody .rank .one {
box-shadow: inset -3px -3px 5px rgba(255, 255, 255, 0.7), inset 3px 3px 5px rgba(65, 60, 60, 0.39);
}
.container .body .rightBody {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
right: 5%;
width: 40%;
height: 64vh;
top: 35%;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -3px -5px 5px rgba(255, 255, 255, 0.83);
}
.container .body .rightBody .calendar {
width: 90%;
height: 60%;
position: relative;
top: 20px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: inset -3px -3px 5px rgba(255, 255, 255, 0.7), inset 3px 3px 5px rgba(65, 60, 60, 0.39);
}
.container .body .rightBody .calendar .list {
width: 95%;
height: 75%;
bottom: 8%;
position: absolute;
display: flex;
flex-wrap: wrap;
overflow: hidden;
gap: 10px;
}
.container .body .rightBody .calendar .list span {
height: 1.2em;
width: 1.2em;
background-color: rgba(201, 204, 204, 0.84);
}
.container .body .rightBody .calendar .list .active {
background-color: rgba(29, 215, 97, 0.91);
}
.container .body .rightBody .project {
width: 95%;
height: 25%;
border-radius: 10px;
position: relative;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: inset -3px -3px 5px rgba(255, 255, 255, 0.7), inset 3px 3px 5px rgba(65, 60, 60, 0.39);
}注：本人蒻媾，大佬勿喷ovo。
1322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
