简单计算器效果-html代码-BFW代码库

代码语言：html

代码描述：简单计算器效果

代码标签：

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@300;400;600&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet" />
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: "Open Sans", sans-serif;
  user-select: none;
}

body {
  background: #394965;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 5px;
  width: 320px;
  position: relative;
  box-shadow: 0 0 60px rgba(143, 205, 255, .5);
}

.fa-history {
  position: absolute;
  left: 9px;
  top: 9px;
  color: #58b3ff;
  transition: 300ms ease-out;
  z-index: 3;
  padding: 12px;
  opacity: .7;
}

.fa-history:hover {
  opacity: 1;
}

.fa-history-toggle {
  color: white;
}

#op-history-container {
  position: absolute;
  top: 0;
  height: 29%;
  width: 100%;
  background: rgba(88, 179, 255, .925);
  z-index: 1;
  border-radius: 5px 5px 0 0;
  padding: 12px 36px;
  text-align: right;
  overflow: auto;
  transition: all 300ms ease-out;
}

#op-history-container::-webkit-scrollbar {
  width: 9px;
  background: white;
  border-radius: 10px 10px 0 0;
}
 
#op-history-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #58b3ff;
}

.op-item {
  color: white;
  padding: 6px 0;
}

input {
  border: none;
  padding: 12px 36px;
  width: 100%;
  text-align: right;
  letter-spacing: 3px;
  font-weight: 300;
  pointer-events: none;
}

.gradient-divider {
  width: 100%;
  border: 0;
  border-top: 2px solid #e6f5ff;
  background: linear-gradient(#e6f5ff, rgba(0,0,0,0));
  padding: 12px 0;
}

#input-top {
  font-size: 18px;
  color: #cad0d4;
  border-radius: 5px;
  padding-top: 18px;
  padding-bottom: 0;
  letter-spacing: 5px;
}

#input-bottom {
  font-size: 60px;
  color: #929ea7;
  height: 106px;
  letter-spacing: 5px;
}

.row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 9px;
}

.num {
  font-weight: 600;
  color: #74828f;
  padding: 24px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

::placeholder {
  color: #74828f;
  opacity: .3;
}

.op {
  border-radius: 50%;
  box-shadow: 0 9px 12px #e3f3ff;
  padding: 24px;
  width: 6px;
  height: 6px;
  color: #a5d7ff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#reset {
  color: #ff8787;
}

#equal {
  background: #58b3ff;
  color: white;
  font-size: 24px;
  width: 70%;
  text-align: center;
  border-radius: 3px;
  padding: 9px 0;
  position: relative;
  top: 21px;
  box-shadow: 0 0 18px rgba(88, 179, 255, .5);
}

.hide {
  opacity: 0;
  pointer-events: none;
  transition: all 300ms ease-out;
}

.disclaimer {
  margin-top: 5em;
  color: #58b3ff;
}

.disclaimer a {
  color: #58b3ff;
  text-decoration: none;
}

.disclaimer span:hover {
  cursor: pointer;
}

@media (max-height: 720px) {
  .main-wrapper {
    transform: scale(.8)
  }
  
  .disclaimer {
    margin-top: 1em;
  }
}
</style>

</head>
<body translate="no">


<div class="main-wrapper">
<div id="op-history-container" class="hide"></div>
<div class="inputs-wrapper">
<i class="fas fa-history" id="toggle-history"></i>
<input type="text" id="input-top">
<input type="text" id="input-bottom" placeholder="0">
</div>
<div class="gradient-divider"></div>
<div class="row">
<div data-set="7" class="num">7</div>
<div data-set="8" class="num">8</div>
<div data-set="9" class="num">9</div>
<div data-set="/" class="op">÷</div>
</div>
<div class="row">
<div data-set="4" class="num">4</div>
<div data-set="5" class="num">5</div>
<div data-set="6" class="num">6</div>
<div data-set="*" class="op">x</div>
</div>
<div class="row">
<div data-set="1" class="num">1</div>.........完整代码请登录后点击上方下载按钮下载查看