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

代码语言：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-area: percent;
}

.divide {
  grid-area: divide;
}

.seven {
  grid-area: seven;
}

.eight {
  grid-area: eight;
}

.nine {
  grid-area: nine;
}

.times {
  grid-area: times;
}

.four {
  grid-area: four;
}

.five {
  grid-area: five;
}

.six {
  grid-area: six;
}

.minus {
  grid-area: minus;
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.plus {
  grid-area: plus;
}

.zero {
  grid-area: zero;
}

.decimal {
  grid-area: decimal;
}

.equals {
  grid-area: equals;
}

.toggle {
  width: 100%;
}

.theme-switch-wrapper {
  display: block;
  float: right;
  align-items: center;
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display: none;
}

.slider {
  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);
  background-color: inherit;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.slider:before {
  background-color: var(--bg-color);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  bottom: 4px;
  content: "";
  height: 22px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 22px;
}

input:checked + .slider {
  background-color: var(--bg-.........完整代码请登录后点击上方下载按钮下载查看

js实现计算器效果

网友评论0

css的margin-block与margin-trim布局切换示例代码

css布局实现胡桃夹子效果代码

css+div布局绘制光芒四射的可爱太阳代码

单个div+css布局实现圣诞雪花球水晶球雪景球效果代码

div+css布局实现一个立体开始按钮效果代码

单个div+css布局实现蛋糕蜡烛效果代码

单个div+css布局实现礼盒效果代码

div+css布局实现城堡建筑效果代码

div+css布局实现圣诞节装饰图案灯笼效果代码

div+css布局实现立体键盘效果代码