js+css实现动态显示当年当月当日剩余时间进度条效果代码-html代码-BFW代码库

代码语言：html

所属分类：进度条

代码描述：js+css实现动态显示当年当月当日剩余时间进度条效果代码，显示了当年剩余时间进度，当月剩余时间进度，当日剩余时间进度，当时剩余时间进度，能够很好展现每天每年每月每日剩余时间进度，让我们更加珍惜时间。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap");

* {
	margin: 0;
	box-sizing: border-box;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none;
	user-select: none;
}

:root {
	--black: #eee;
	--white: #111;
	--red: rgb(206, 31, 31);
	--day_size: 0px;
	--barH: 20px;
	--margin: 2px;
	--gridMargin: 14px;
}

body {
	font-family: "Fira Code", monospace;
	background: var(--white);
	color: var(--black);
	overflow: hidden;
	transition: all 500ms cubic-bezier(0.87, -0.2, 0.15, 1.44);
}

.header {
	display: flex;
	align-items: flex-end;
	height: 20vh;
	padding-left: 100px;
	padding-bottom: var(--gridMargin);
	font-weight: 700;
}

.day_night {
	width: 80px;
	height: 80px;
	position: absolute;
	right: 0;
	top: 0;
	color: var(--white);
	transition: all 650ms cubic-bezier(0.87, -0.2, 0.15, 1.44);
	transform: translate(55px, -40px);
	cursor: pointer;
}

.day_night.light {
	transform: translate(55px, -40px) rotate(180deg);
}

.day_night:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0px;
	background: var(--black);
	border-radius: 10px;
	z-index: -1;
	transform: skewX(-30deg);
}

.day_night:hover {
	right: 5px;
	top: 5px;
}

.day_icon {
	position: absolute;
	bottom: 5px;
	left: -5px;
}

.night_icon {
	position: absolute;
	top: 5px;
	right: -5px;
	transform: rotate(-85deg);
}

.main {
	height: 80vh;
	margin: 0 100px;
	padding-bottom: 50px;
	display: grid;
	grid-template-rows: auto auto 1fr;
	grid-template-columns: auto auto;
	grid-template-areas:
		"year month"
		"day hour"
		"days days";
	column-gap: 14px;
}

.grid-item {
	align-self: center;
	margin: var(--gridMargin) 0;
}

.bar {
	border: 1px solid var(--black);
	background: var(--white);
	height: var(--barH);
	margin-top: var(--margin);
	width: 100%;
	box-shadow: 5px 3px #888;
	transition: background 500ms cubic-bezier(0.87, -0.2, 0.15, 1.44);
}

.bar div {
	background: var(--black);
	height: 100%;
	transition: width 450ms linear,
		background 500ms cubic-bezier(0.87, -0.2, 0.15, 1.44);
}

.days {
	grid-area: days;
	display: flex;
	flex-direction: column;
	margin: var(--gridMargin) 0 0 0;
}

.days_cont {
	display: flex;
	flex-wrap: wrap;
	height: 100%;
	margin-top: 5px;
	align-content: start;
}

.days_cont div {
	border: 1px solid var(--black);
	height: var(--day_size);
	width: var(--day_size);
	margin: 0 var(--margin) var(--margin) 0;
}

.passed {
	background: var(--black);
}

.passed.flicker {
	animation: flicker 1750ms linear infinite;
}

@keyframes flicker {
	0% {
		background: var(--white);
	}
	50% {
		background: var(--red);
	}
	100% {
		background: var(--white);
	}
}
</style>



</head>

<body >
  <header class="header">
	<h1 class="header__title">Progress / <span id="year_num"></span></h1>
</header>
<aside class="day_night" id="day_night">
	<span class="day_icon">🌤️</span>
	<span class="night_icon">🌙</span>
</aside>
<main class="main" id="main">
	<div class="year_progress grid-item">
		<p>Year progress: <span id="yp_text"></span></p>
		<div class="bar">
			<div id="yp_bar"></div>
		</div>
	</div>
	<div class="month_progress grid-item">
		<p>Month progress: <span id="mp_text"></span></p>
		<div class="bar">
			<div id="mp_bar"></div>
		</div>
	</div>
	<div class="day_progress grid-item">
		<p>Day progress: <span id="dp_text"></span></p>
		<div class="bar">
			<div id="dp_bar"></div>
		</div>
	</div>
	<div class="hour_progress grid-item">
		<p>Hour progress: <span id="hp_text"></span></p>
		<div class="bar">
			<div id="hp_bar"></div>
		</div>
	</div>
	<div class="days">
		<p>Day:</p>
		<div class="days_cont" id="days_cont"></div>
	</div>
</main>

.........完整代码请登录后点击上方下载按钮下载查看