js实现计算器效果-html代码-BFW代码库

js实现计算器效果

代码语言：html

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

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

<style>
@import url("https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap");
:root {
  --body-bg-color: #e0e5ec;
  --bg-color: #e0e5ec;
  --primary-font-color: rgba(144,152,168,1);
  --secondary-font-color: rgba(51,64,89,1);
  --soft-high-light: rgba(255,255,255,.43);
  --dark-high-light: rgba(217,210,200,.51);
}

[data-theme="dark"] {
  --bg-color: #131419;
  --primary-font-color: #c7c7c7;
  --secondary-font-color: #03a9f4;
  --soft-high-light: rgba(255,255,255,.05);
  --dark-high-light: rgba(0,0,0,.51);
}

* {
  box-sizing: border-box;
}

body {
  background: var(--body-bg-color);
  color: var(--primary-font-color);
}

.calculator {
  background: var(--bg-color);
  color: var(--primary-font-color);
}

.display {
  box-shadow: 6px 6px 16px 0 var(--dark-high-light), -6px -6px 16px 0 var(--soft-high-light), inset 6px 6px 5px 0 var(--dark-high-light), inset -6px -6px 5px 0 var(--soft-high-light);
  border: 5px solid var(--soft-high-light);
  color: var(--secondary-font-color);
}

.neumorphic {
  box-shadow: 6px 6px 16px 0 var(--dark-high-light), -6px -6px 16px 0 var(--soft-high-light);
  border-radius: 50%;
  transition: .1s all ease-in-out;
  border: 1px solid var(--soft-high-light);
}

.neumorphic:hover {
  box-shadow: inset 6px 6px 5px 0 var(--dark-high-light), inset -6px -6px 5px 0 var(--soft-high-light);
  col.........完整代码请登录后点击上方下载按钮下载查看