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>


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