d3实现带指针仪表盘判断年份是否闰年代码-html代码-BFW代码库

d3实现带指针仪表盘判断年份是否闰年代码

代码语言：html

所属分类：其他

代码描述：d3实现带指针仪表盘判断年份是否闰年代码

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


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

<head>
  <meta charset="UTF-8">
  



  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Nabla&amp;display=swap'>
  
<style>
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	--padding: 8px;
	padding: var(--padding);
	height: 100vh;
	display: grid;
	justify-items: center;
	font-family: system-ui,sans-serif;
}

.pile {
	display: grid;
	grid-template: 1fr / 1fr;
	place-items: center;
	& > * {
		grid-area: 1 / 1 / -1 / -1;
	}
}

.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}


#container {
	/* border: 1px dashed red; */
	width: calc(100vmin - 2 * var(--padding));
	height: calc(100vmin - 2 * var(--padding));
	container-type: inline-size;
	--leap-color: fuchsia;
	--century-color: orangered;
}

svg {
	width: 100%;
	height: 100%;
}

#years path {
	fill: rebeccapurple;
	&.bright {
		fill: var(--leap-color);
	}
}

#years100 path {
	fill: firebrick;
	&.bright {
		fill: var(--century-color);
	}
}

#needle {
	fill: slategray;
	transition: transform 100ms;
}

#year {
	appearance: none;
	font-size: 16vmin;
	font-variant-numeric: tabular-nums;
	width: 5ch;
	text-align: center;
	background: rgba(255, 255, 255, 0.7);
	border: none;
	display: block;
}

form {
	display: flex;
	flex-direction: column;
	align-items: center;
}

output {
	font-size: 6cqi;
	width: 66cqi;
	text-align: center;
	height: 0; /* don't take up space in the flex layout */

	& .explanation {
		margin: 0;
		font-size: .8em;
	}

	& .leap {
		color: var(--leap-color);
	}

	& .century {
		color: var(--century-color);
	}
}
</style>


  
  
</head>

<body translate="no">
  <div id="container" class="pile">
	<svg viewBox="0 0 1 1">
		<defs>
			<filter id="shadow" filterUnits="">
				<feDropShadow dx="0" dy="0" stdDeviation="0.005" flood-opacity=".3" />
			</filter>
		</defs>
		<g id="coords" transform="translate(.5, .5)">
			<g id="years"></g>
			<g id="years100"></g>
			<path id="needle" d="M-.03,.02H.03L0,-.34Z" filter="url(#shadow)"></path>
		</g>
	</svg>
	<form action="">
		<label for="year" class="visually-hidden">Year</label>
		<input id="year" type="number" min="1583" max="9999" />
		<output for="ye.........完整代码请登录后点击上方下载按钮下载查看