纯css实现的计算器效果-html代码-BFW代码库

代码语言：html

代码描述：纯css实现的计算器效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
/* ### LOGIC ################ */
.number9 + * { --digit: 0; }
.number0:checked + * + * + * + * + * + * + * + * + * + * { --digit: 0; }
.number1:checked + * + * + * + * + * + * + * + * + * { --digit: 1; }
.number2:checked + * + * + * + * + * + * + * + * { --digit: 2; }
.number3:checked + * + * + * + * + * + * + * { --digit: 3; }
.number4:checked + * + * + * + * + * + * { --digit: 4; }
.number5:checked + * + * + * + * + * { --digit: 5; }
.number6:checked + * + * + * + * { --digit: 6; }
.number7:checked + * + * + * { --digit: 7; }
.number8:checked + * + * { --digit: 8; }
.number9:checked + * { --digit: 9; }

#digit1 > :checked ~ :last-child { --digit-1: var(--digit); --value-1: var(--digit); }
#digit2 > :checked ~ :last-child { --digit-2: var(--digit); --value-1: calc(var(--digit-1) * 10 + var(--digit-2)); }
#digit3 > :checked ~ :last-child { --digit-3: var(--digit); --value-1: calc(var(--digit-1) * 100 + var(--digit-2) * 10 + var(--digit-3)); }
#digit4 > :checked ~ :last-child { --digit-4: var(--digit); --value-1: calc(var(--digit-1) * 1000 + var(--digit-2) * 100 + var(--digit-3) * 10 + var(--digit-4)); }
#digit5 > :checked ~ :last-child { --digit-5: var(--digit); --value-2: var(--digit-5); }
#digit6 > :checked ~ :last-child { --digit-6: var(--digit); --value-2: calc(var(--digit-5) * 10 + var(--digit-6)); }
#digit7 > :checked ~ :last-child { --digit-7: var(--digit); --value-2: calc(var(--digit-5) * 100 + var(--digit-6) * 10 + var(--digit-7)); }
#digit8 > :checked ~ :last-child { --digit-8: var(--digit); --value-2: calc(var(--digit-5) * 1000 + var(--digit-6) * 100 + var(--digit-7) * 10 + var(--digit-8)); }

#add:checked      ~ #equals:checked ~ main { --out: calc(var(--value-1) + var(--value-2)); }
#subtract:checked ~ #equals:checked ~ main { --out: calc(var(--value-1) - var(--value-2)); }
#multiply:checked ~ #equals:checked ~ main { --out: calc(var(--value-1) * var(--value-2)); }
#divide:checked   ~ #equals:checked ~ main { --out: calc(var(--value-1) / var(--value-2)); }

main { counter-reset: value1 var(--value-1, 0) value2 var(--value-2, 0) out var(--out, 0); }

/*    a
*/
 #input::after { content: ""; }
#output::after { content: counter(value1); }

/*    a
      +
*/
#operations > :checked ~ #equals:not(:checked) ~ main #input::after { content: counter(value1); }

#add:checked      ~ #equals:not(:checked) ~ main  #output::after { content: "+"; }
#subtract:checked ~ #equals:not(:checked) ~ main  #output::after { content: "-"; }
#multiply:checked ~ #equals:not(:checked) ~ main  #output::after { content: "\00D7"; }
#divide:checked   ~ #equals:not(:checked) ~ main  #output::after { content: "\00f7"; }

/*   a +
       b
*/
#digit5 :checked ~ div #add:checked      ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " + "; }
#digit5 :checked ~ div #subtract:checked ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " - "; }
#digit5 :checked ~ div #multiply:checked ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " \00D7  "; }
#digit5 :checked ~ div #divide:checked   ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " \00f7 "; }

#digit5 :checked ~ div #operations > :checked ~ #equals:not(:checked) ~ main #output::after,
#digit5 :checked ~     #operations > :checked ~ #equals:not(:checked) ~ main #output::after { content: counter(value2); }

/* a + b
       c
*/
#add:checked      ~ #equals:checked ~ main  #input::after { content: counter(value1) " + " counter(value2); }
#subtract:checked ~ #equals:checked ~ main  #input::after { content: counter(value1) " - " counter(value2); }
#multiply:checked ~ #equals:checked ~ main  #input::after { content: counter(value1) " \00D7  " counter(value2); }
#divide:checked   ~ #equals:checked ~ main  #input::after { content: counter(value1) " \00f7  " counter(value2); }


#equals:checked ~ main #output::after { content: counter(out); }

/* dividing by 0 */
#digit5 > .number0:checked ~ div #divide:checked ~ #equals:checked ~ main #output::after { content: "Oi"; }

#digit5 > .number0:checked ~ div #divide:checked ~ #equals:checked ~ main #output::after { content: "Oi"; }
#digit5 :not(..........完整代码请登录后点击上方下载按钮下载查看