纯css实现if与函数数字运算及计算器示例代码-html代码-BFW代码库

纯css实现if与函数数字运算及计算器示例代码

代码语言：html

代码描述：纯css实现if与函数数字运算及计算器示例代码，没有任何一行js代码，通过css的新特性if与function来实现计算器。

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

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

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

  
  
  
<style>
@import url(https://fonts.bunny.net/css?family=cutive-mono:400|jura:300,500);
@layer base, demo;

@layer demo {
	.math-wrapper {
		display: none;
	}
	@supports (appearance: base-select) {
		/* this is not the ideal check but currently there is no way to check if a browser supports the if() or function() functions. As this code also uses custom select styling I am using that to check */
		:root {
			--option-radius: 5px;
			--option-color: var(--clr-text);
			--option-color-current: hotpink;
			--option-color-hover: dodgerblue;
		}
		.math-wrapper {
			display: block;
			--math: if(
				style(--operation: "+"): --add(var(--value-1), var(--value-2)) ;
					style(--operation: "-"): --subtract(var(--value-1), var(--value-2)) ;
					style(--operation: "*"): --multiply(var(--value-1), var(--value-2)) ;
					style(--operation: "/"): --divide(var(--value-1), var(--value-2)) ;
			);

			display: flex;
			align-items: center;
			gap: 1rem;
			font-size: clamp(1rem, 2.5vw + 0.4rem, 2rem);
			line-height: 1.2;
			font-family: "Cutive Mono", monospace;
		}

		/* Map number 1 (0–10)  */
		.math-wrapper:has(select[name="operand1"] option[value="0"]:checked) {
			--value-1: 0;
		}
		.math-wrapper:has(select[name="operand1"] option[value="1"]:checked) {
			--value-1: 1;
		}
		.math-wrapper:has(select[name="operand1"] option[value="2"]:checked) {
			--value-1: 2;
		}
		.math-wrapper:has(select[name="operand1"] option[value="3".........完整代码请登录后点击上方下载按钮下载查看