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-content: center;
	flex: 1;
	padding-inline: var(--container-padding-inline);
	
	&.fraction {
		align-items: end;
	}
	
	&.pie {
		align-items: start;
		background: gold;
	}
}

#pie {	
	width: var(--diameter);
	aspect-ratio: 1;
	box-sizing: border-box;
	background: 
		repeating-conic-gradient(black 0 calc(var(--stroke-width-arc) * 100%), transparent 0 var(--increment)), 
		conic-gradient(var(--color-on) calc(var(--fraction) * 100%), transparent 0)
		var(--color-off);
	border-radius: 50%;
	b.........完整代码请登录后点击上方下载按钮下载查看