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

代码语言:html

所属分类:其他

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

代码标签: 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>


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

网友评论0