css+js实现视觉分数效果代码-html代码-BFW代码库

css+js实现视觉分数效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现视觉分数效果代码，输入不同数字进行圆的切分。

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

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

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

  
  
  
<style>
* {
        margin: 0;
        padding: 0;
}

:root {
        --π: 3.1415926535;
        --color-on: oklch(.55 .2 340);
        --color-off: oklch(.8 .1 340);
        --color-off: color-mix(in oklch, white, var(--color-on));
        --fraction: calc(var(--numerator) / var(--denominator));
        --increment: calc(100% / var(--denominator));
        
        --container-padding-inline: 3rem;
        --max-diameter: min(30rem, 48vw - var(--container-padding-inline));
        --diameter: clamp(0rem, 80vmin, var(--max-diameter));
        --circumference: calc(var(--π) * var(--diameter));
        --stroke-width-arc: clamp(0, .007, 1 / var(--denominator) / 3);
        --stroke-width: calc(var(--circumference) * var(--stroke-width-arc));
}

html {
        font: 150%/1 system-ui, sans-serif;
}

body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: auto;
        min-height: 100vh;
}

.container {
        display: flex;
        flex-flow: column;
        justify-conte.........完整代码请登录后点击上方下载按钮下载查看