html
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时间</title>
<style>
.RecordSummary {
width: 310px;
display: flex;
justify-content: space-evenly;
padding: 12px 0;
background-color: #28a745;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
inset 0 2px 2px -2px white, inset 0 0 2px 9px #47434c, inset 0 0 2px 10px #ff0000;
margin: 120px auto;
}
/*日期标题 */
.date-container {
width: 100px;
}
.year-month {
position: absolute;
}
.year {
color: rgb(234, 255, 0);
background-color: #ff0000;
font-size: 15px;
transform: translate(15%, -34%);
padding: 5px 5px 14px 5px;
border-radius: 10px 0px 0 0;
}
.date-container h1 {
position: absolute;
border: 5px solid #47434c;
width: 90px;
line-height: 70px;
font-size: 45px;
letter-spacing: -5px;
-webkit-text-fill-color: transparent;
border-radius: 20px 10px 10px 10px;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
}
.month {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
text-shadow: 1px 1px 1px #d1ec04;
-webkit-text-stroke: #fffbfb 1px;
top: -30px;
left: 0px;
}
.month-duplicate {
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
transform: translate(0%, -38%);
z-index: 20;
text-shadow: 1px 1px 1px #ff0303;
-webkit-text-stroke: #ffffff 1px;
}
.rent-fee {
width: 39px;
height: 20px;
background-color: #eeff00;
margin: 42px 1px 1px 50px;
padding: 15px 5px 0 0px;
border-radius: 0 0 10px 0;
font-weight: bold;
line-height: 1.3;
text-align: center;
color: #ff0000;
text-shadow: 1px 1px 1px #000000;
}
/*日期标题 结束*/
/* 周期 */
.water-meter {
width: 70px;
height: 70px;
border-radius: 80px;
background: #e0f7fa;
border: 5px solid #0288d1;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.water-meter p {
margin: 4px;
font-size: 25px;
font-weight: bold;
padding: 0 7px 3px 5px;
text-align: center;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6),
0 0 10px 2px rgba(223, 0, 0, 0.2), 0 0 1px 2px rgb(28, 117, 1),
inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,
inset 0 0 2px 32px #f6f6f6;
border-radius: 30px 30px 0 0;
}
.water-meter h2 {
background: linear-gradient(to top, #0091ea, #00bcd4);
border-radius: 0 0 80px 80px;
font-size: 20px;
text-align: center;
margin: -7px 5px;
width: 60px;
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
}
/* 周期 结束*/
/* 时间 */
.electric-meter {
display: flex;
flex-direction: column;
width: 70px;
height: 70px;
border: 5px solid #47434c;
border-radius: 10px;
background: #fff;
padding: 1px;
}
.electric-meter p {
margin: 0;
font-weight: bold;
text-align: center;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6),
0 0 10px 2px rgba(223, 0, 0, 0.2), 0 0 1px 2px rgb(28, 117, 1),
inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,
inset 0 0 2px 32px #f6f6f6;
color: #ff0000;
text-shadow: 1px 1px 1px #000000;
}
.hour {
border-radius: 30px 30px 0 0;
}
.minute {
border-radius: 0 0 30px 30px;
}
.second {
background: #9c0d0d;
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
text-align: center;
border: 1px solid #e0f7fa;
}
/* 时间结束 */
</style>
</head>
<body>
<div class="RecordSummary" id="dateTime">
</div>
</body>
<script>
/* 现在时间 */
(s = el => {
d = new Date, f = n => ("0" + n).slice(-2), w = "日一二三四五六"; el.innerHTML = `
<div class="date-container">
<div class="year-month">
<p class="year">${d.getFullYear()}</p>
<h1 class="month">${f(d.getMonth() + 1)}月</h1>
</div>
<h1 class="month-duplicate">${f(d.getMonth() + 1)}月</h1>
<p class="rent-fee">${f(d.getDate())}</p>
</div>
<div class="water-meter">
<p>周</p>
<h2>${w[d.getDay()]}</h2>
</div>
<div class="electric-meter">
<p class="hour">${f(d.getHours())}点</p>
<b class="second">${f(d.getSeconds())}秒</b>
<p class="minute">${f(d.getMinutes())}分</p>
</div>` })(setInterval(() => ["dateTime"].forEach(id => s(document.getElementById(id))), 1000));
/* 现在时间 结束 */
</script>
</html>
