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);
  color: var(--secondary-font-color);
}

/*
  GRID LAYOUT & NON NEUMORPHIC 
*/
body {
  display: grid;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-items: center;
  font-family: 'Odibee Sans';
  font-size: 16px;
}

.display {
  border-radius: 12px;
  transition: .1s all ease-in-out;
  height: 60px;
  line-height: 60px;
  text-align: right;
  padding-right: 20px;
  width: 100%;
  font-size: 32px;
  letter-spacing: 4px;
}

.calculator {
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "toggle toggle toggle toggle" "display display display display" "c signed percent divide" "seven eight nine times" "four five six minus" "one two three plus" "zero zero decimal equals";
  align-items: center;
  justify-items: center;
  grid-row-gap: 25px;
  grid-column-gap: 25px;
  border-radius: 20px;
  padding: 50px 40px 40px 40px;
}

.c, .signed, .percent, .divide, .seven, .eight, .nine, .times, .four, .five, .six, .minus, .one, .two, .three, .plus, .zero, .decimal, .equals {
  text-align: center;
  height: 60px;
  width: 60px;
  line-height: 60px;
}

.zero {
  width: 100%;
  border-radius: 12px;
}

.toggle {
  grid-area: toggle;
}

.display {
  grid-area: display;
}

.c {
  grid-area: c;
}

.signed {
  grid-area: signed;
}

.percent {
  grid-.........完整代码请登录后点击上方下载按钮下载查看