如何制作计算器（可操作且动画化）

各位读者好，欢迎来到我的新博客。今天我将向大家介绍如何制作一个计算器。这款计算器有一些与普通计算器不同的功能。这些功能包括：我添加了动画，并将计算器设置为透明。

众所周知，计算器是一种帮助人们更轻松地进行数学运算的机器。
例如，大多数计算器都具有加、减、乘、除等基本功能。此外，还有科学计算器、专用计算器、金融计算器等等。

有些计算器还可以计算平方根，更复杂的计算器可以帮助进行微积分并绘制函数图。

这个计算器的气泡或框动画使它看起来更漂亮，而且它也是透明的，使它更令人讨厌

如果您想要这些小盒子的真实动画以及制作此计算器背后的代码，您可以阅读整个博客并使用下面给出的链接观看计算器的预览。

使用 HTML CSS 和 JavaScript 的计算器教程

计算器预览
请访问我的网站，该网站正在建设中 -目前不可用
请订阅我朋友的频道 - 放松的声音和音乐
我的第二个频道放松的声音和音乐

HTML

超文本标记语言 (HTML) 是用于在 Web 浏览器中显示的文档的标准标记语言。它可以借助层叠样式表 (CSS) 等技术和 JavaScript 等脚本语言来辅助实现。

Web 浏览器从 Web 服务器或本地存储接收 HTML 文档，并将其渲染为多媒体网页。HTML 以语义方式描述网页的结构，并最初包含文档外观的提示。

HTML 元素是 HTML 页面的构建块。使用 HTML 结构，可以将图像和其他对象（例如交互式表单）嵌入到渲染的页面中。HTML 通过表示文本（例如标题、段落、列表、链接、引用和其他项目）的结构语义，提供了一种创建结构化文档的方法。HTML 元素由使用尖括号书写的标签来划分。诸如和之类的标签可直接将内容引入页面。其他标签，例如

环绕并提供有关文档文本的信息，并可能包含其他标签作为子元素。浏览器不会显示 HTML 标签，但会使用它们来解释页面内容。

源代码

源代码如下

步骤 1

创建一个名为index.html的文件并写入以下代码。

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
   <!--- <title> Glassmorphism Calculator| Codeflix </title>--->
    <link rel="stylesheet" href="style.css">
   </head>
<body>

步骤 2

这是动画部分（请仔细操作）。每批包含7个气泡。

<div class="bubbles">
  <span class="one"></span>
  <span class="two"></span>
  <span class="three"></span>
  <span class="four"></span>
  <span class="five"></span>
  <span class="six"></span>
  <span class="seven"></span>
  <span class="seven"></span>
</div>
<div class="bubbles">
  <span class="one"></span>
  <span class="two"></span>
  <span class="three"></span>
  <span class="four"></span>
  <span class="five"></span>
  <span class="six"></span>
  <span class="seven"></span>
  <span class="seven"></span>
</div>
<div class="bubbles">
  <span class="one"></span>
  <span class="two"></span>
  <span class="three"></span>
  <span class="four"></span>
  <span class="five"></span>
  <span class="six"></span>
  <span class="seven"></span>
  <span class="seven"></span>
</div>
<div class="bubbles">
  <span class="one"></span>
  <span class="two"></span>
  <span class="three"></span>
  <span class="four"></span>
  <span class="five"></span>
  <span class="six"></span>
  <span class="seven"></span>
  <span class="seven"></span>
</div>

步骤 3

此代码将创建计算器的容器。

 <div class="container">
   <form action="#" name="forms">
     <input type="text" name="answer">
     <div class="buttons">
       <input type="button" value="AC" onclick="forms.answer.value = ''">
       <input type="button" value="DEL" onclick="forms.answer.value = forms.answer.value.substr(0 , forms.answer.value.length -1)">
       <input type="button" value="%" onclick="forms.answer.value += '%'">
       <input type="button" value="/" onclick="forms.answer.value += '/'">
     </div>

步骤 4

此代码表示按钮的功能、大小以及所有其他内容。

<div class="buttons">
       <input type="button" value="7" onclick="forms.answer.value += '7'">
       <input type="button" value="8" onclick="forms.answer.value += '8'">
       <input type="button" value="9" onclick="forms.answer.value += '9'">
       <input type="button" value="*" onclick="forms.answer.value += '*'">
     </div>
     <div class="buttons">
       <input type="button" value="4" onclick="forms.answer.value += '4'">
       <input type="button" value="5" onclick="forms.answer.value += '5'">
       <input type="button" value="6" onclick="forms.answer.value += '6'">
       <input type="button" value="-" onclick="forms.answer.value += '-'">
     </div>
     <div class="buttons">
       <input type="button" value="1" onclick="forms.answer.value += '1'">
       <input type="button" value="2" onclick="forms.answer.value += '2'">
       <input type="button" value="3" onclick="forms.answer.value += '3'">
       <input type="button" value="+" onclick="forms.answer.value += '+'">
     </div>
     <div class="buttons">
       <input type="button" value="0"  onclick="forms.answer.value += '0'">
       <input type="button" value="00" onclick="forms.answer.value += '00'">
       <input type="button" value="." onclick="forms.answer.value += '.'">
       <input type="button" value="=" onclick="forms.answer.value = eval(forms.answer.value)">
     </div>
   </form>
 </div>
</body>
</html>

CSS

CSS 旨在实现呈现与内容的分离，包括布局、颜色和字体。这种分离可以提高内容的可访问性，在呈现特征的规范方面提供更大的灵活性和控制力，通过在单独的 .css 文件中指定相关的 CSS，使多个网页能够共享格式，从而降低结构内容的复杂性和重复性，并允许缓存 .css 文件，以提升共享文件及其格式的页面之间的页面加载速度。

格式与内容分离也使得同一标记页面能够以不同的样式呈现，以适应不同的渲染方式，例如屏幕显示、打印、语音渲染（通过基于语音的浏览器或屏幕阅读器）以及盲文触觉设备。如果在移动设备上访问内容，CSS 还提供了替代格式的规则。

本项目中的 CSS 代码

Css 在这个项目中扮演着重要的角色，Css 代码也在下面提供。

CSS代码

现在我们将创建一个名为 style.css 的文件并粘贴以下代码。

步骤 1

此代码代表字体、容器、背景颜色

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#2196f3 , #e91e63);
}

步骤 2

此CSS代码用于为气泡添加动画和颜色。
每批包含7个气泡。

.bubbles{
  position: absolute;
  bottom: -120px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 70px;
  width: 100%;
  justify-content: space-around;
}
.bubbles span{
  height: 60px;
  width: 60px;
  background: rgba(255, 255, 255, 0.1);
  animation: move 10s linear infinite;
  position: relative;
  overflow: hidden;
}
@keyframes move {
  100%{
    transform: translateY(-100vh);
  }
}
.bubbles span.one{
  animation-delay: 2.2s;
  transform: scale(2.15)
}
.bubbles span.two{
  animation-delay: 3.5s;
  transform: scale(1.55)
}
.bubbles span.three{
  animation-delay: 0.2s;
  transform: scale(0.35)
}
.bubbles span.four{
  animation-delay: 6s;
  transform: scale(2.15)
}
.bubbles span.five{
  animation-delay: 7s;
  transform: scale(0.5)
}
.bubbles span.six{
  animation-delay: 4s;
  transform: scale(2.5)
}
.bubbles span.seven{
  animation-delay: 3
  transform: scale(1.5)
}
.bubbles span:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 60px;
  width: 40%;
  transform: skew(45deg) translateX(150px);
  background: rgba(255, 255, 255, 0.15);
  animation: mirror 3s linear infinite;
}
@keyframes mirror {
  100%{
    transform: translateX(-450px);
  }
}
.bubbles span.one:before{
  animation-delay: 1.5s;
}
.bubbles span.two:before{
  animation-delay: 3.5s;
}
.bubbles span.three:before{
  animation-delay: 2.5s;
}
.bubbles span.four:before{
  animation-delay: 7.5s;
}
.bubbles span.five:before{
  animation-delay: 4.5s;
}
.bubbles span.six:before{
  animation-delay: 0.5s;
}
.bubbles span.seven:before{
  animation-delay: 6s;
}

步骤 3

此代码代表容器的颜色、容器中的文本输入、按钮的颜色。

  z-index: 12;
  width: 360px;
  padding: 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.container input[type="text"]{
  width: 100%;
  height: 100px;
  margin: 0 3px;
  outline: none;
  border: none;
  color: #fff;
  font-size: 20px;
  text-align: right;
  padding-right: 10px;
  pointer-events: none;
  background: transparent;
}
.container input[type="button"]{
  height: 65px;
  color: #fff;
  width: calc(100% / 4 - 5px);
  background: transparent;
  border-radius: 12px;
  margin-top: 15px;
  outline: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.container input[type="button"]:hover{
  background: rgba(255, 255, 255, 0.1);
}```

文章来源：https://dev.to/codeflix/how-to-make-a-glassorphism-calculator-dhk