js+css模拟一个实体计算器效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css模拟一个实体计算器效果代码，跟实体计算器一样都可以进行计算

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


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

<head>

  <meta charset="UTF-8">
  

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Hind:wght@400;700&amp;display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=VT323&amp;display=swap'>
  
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--bg: #c7cad1;
	--fg: #17181c;
	--calcBg: #e3e4e8;
	--fg: #17181c;
	--logoBlue: #255ff4;
	--transDur: 0.05s;
	--buttonTiming: linear;
	font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
}
body, button, input {
	color: var(--fg);
	font: 1em/1.5 "Hind", sans-serif;
}
body {
	background-color: var(--bg);
	display: grid;
	padding: 1.5em 0;
	place-items: center;
	height: 100vh;
}
.calc {
	background-color: var(--calcBg);
	background-image:
		linear-gradient(180deg,#0000,#0001),
		radial-gradient(0.25em 0.25em at 0.5em 0.25em,#fff7 25%,#fff0 50%),
		radial-gradient(95% 0.25em at 50% 0.25em,#fff7 25%,#fff0 50%);
	border-radius: 0.75em;
	box-shadow:
		0 0.5em 0.5em #fff4 inset,
		0 -0.125em 0.25em 0.125em #0007 inset,
		0 0.25em 0.75em #0007;
	padding: 0.25em 1em;
	position: relative;
	width: 12em;
	height: 19.5em;
}
.calc__btns {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-template-rows: repeat(6,1.5em);
	grid-gap: 0.5em 0.75em;
}
.calc__btn:focus, .calc__btn span:focus, .calc__screen:focus {
	outline: transparent;
}
.calc__btn, .calc__screen {
	-webkit-appearance: none;
	appearance: none;
}
.calc__btn, .calc__btn.calc__btn--primary, .calc__btn.calc__btn--secondary {
	color: #fff;
}
.calc__btn {
	background-color: #2e3138;
	background-image:
		linear-gradient(180deg,#0000,#0002),
		radial-gradient(90% 0.125em at 50% 0.125em,#fff7 25%,#fff0 50%);
	border: 0;
	border-radius: 0.25em;
	box-shadow:
		0.125em 0.125em 0.25em #0007,
		0 -0.05em 0 0.05em #0004,
		0 0.05em 0 0.05em #fff4,
		-0.125em 0 0.125em #22252a inset,
		0 0.125em 0.125em #fff4 inset,
		0.125em 0 0.125em #fff4 inset,
		0 -0.125em 0.125em #22252a inset;
	cursor: pointer;
	text-shadow: 0 0 0.125em #fff7;
	transition: box-shadow var(--transDur) var(--buttonTiming);
	-webkit-tap-highlight-color: #0000;
}
.calc__btn:active, .calc__btn.calc__btn--active {
	box-shadow:
		0 0 0 #0007,
		0 -0.05em 0 0.05em #0004,
		0 0.05em 0 0.05em #fff4,
		-0.125em 0 0.125em #0b0c0e inset,
		0 0.125em 0.125em #0004 inset,
		0.125em 0 0.125em #0004 inset,
		0 -0.125em 0.125em #0b0c0e inset;
}
.calc__btn:active span, .calc__btn.calc__btn--active span {
	transform: scale(0.95);
}
.calc__btn:focus {
	color: #86a6f9;
	text-shadow: 0 0 0.25em #86a6f977;
}
.calc__btn small, .calc__btn span {
	pointer-events: none;
}
.calc__btn span {
	display: block;
	transition: transform var(--transDur) var(--buttonTiming);
}
.calc__btn.calc__btn--primary {
	background-color: #255ff4;
	box-shadow:
		0.125em 0.125em 0.25em #0007,
		0 -0.05em 0 0.05em #0004,
		0 0.05em 0 0.05em #fff4,
		-0.125em 0 0.125em #0936aa inset,
		0 0.125em 0.125em #fff4 inset,
		0.125em 0 0.125em #fff4 inset,
		0 -0.125em 0.125em #0936aa inset;
}
.calc__btn.calc__btn--primary:active, .calc__btn.calc__btn--primary.calc__btn--active {
	box-shadow:
		0 0 0 #0007,
		0 -0.05em 0 0.05em #0004,
		0 0.05em 0 0.05em #fff4,
		-0.125em 0 0.125em #062779 inset,
		0 0.125em 0.125em #0004 inset,
		0.125em 0 0.125em #0004 inset,
		0 -0.125em 0.125em #062779 inset;
}
.calc__btn.calc__btn--secondary {
	background-color: #5c6270;
	box-shadow:
		0.125em 0.125em 0.25em #0007,
		0 -0.05em 0 0.05em #0004,
		0 0.05em 0 0.05em #fff4,
		-0.125em 0 0.125em #454954 inset,
		0 0.125em 0.125em #fff4 inset,
		0.125em 0 0.125em #fff4 inset,
		0 -0.125em 0.125em #454954 inset;
}
.calc__btn.calc__btn--secondary:active, .calc__btn.calc__btn--secondary.calc__btn--active {
	box-shadow:
		0 0 0 #0007,
		0 -0.05em 0 0.05em #0004,
		0 0.05em 0 0.05em #fff4,
		-0.125em 0 0.125em #2e3138 inset,
		0 0.125em 0.125em #0004 inset,
		0.125em 0 0.125em #0004 inset,
		0 -0.125em 0.125em #2e3138 inset;
}
.calc__btn--tall {
	grid-column: 4 / 5;
	grid-row: 5 / 7;
}
.calc__error, .calc__memory, .calc__screen {
.........完整代码请登录后点击上方下载按钮下载查看