首页 编程语言 css

用div+css做一个简易的计算器，几行js完成计算功能「217」

  • 终于想做一个计算器了，少少几行js代码而已。
  • 网上有很多的html计算器的实例，大多是用table来做的，但我还是选择用div来做。
  • 这个计算器有基本的运算功能，但一些细的纠错，就没再细究了，极简嘛。

一、开始吧，先做一个360*500的盒子。

二、加入输入框，输入框给它270宽，再配个灰色背景。

三、做18个div，我觉得这样子比table标签更直观，其实你还是什么都看不见，因为字是黑色的，背景黑色的。

四、行了，我们给div加样式吧。

  • 盒子天生独占一行，我们做一下修改让它摆得整齐些。

五、我们让这18个按钮浮动，它们就不会独占一行了，然后再让它们外部上下左右距离为5px。

  • 整体的样子是有了。

六、把按键做成圆的，里面的字居中，然后再把字变大。

  • 注释占了太多行，后面我就不写这么多了，特别是重复的。

七、把计算器的整体外观也改改。

  • 内部距离20px，再加20px的圆角。

八、“=”和“0” 这两个一个是加高，一个是加宽，我们得再加样式区别对待。

  • 按钮变长了，但是却空了一行。

九、我们让等号按钮右浮动就可以了。

十、对按钮再修饰，做两个样式，一个是灰白色，一个是土黄色。

十一、对输入框做个修饰，最终完成界面设计。

十二、我们整个js只用获取一个元素对象，那就是input。

十三、做按钮点击事件，把大多数按钮的点击都写进去，这里我特意用箭头函数，当学习吧。

几乎所有的按钮都调用这个clickbt函数，唯有“=”号不用。

十四、该是为“=”加函数的时候了，这里用了eval()，能把字符串当算式运算出结果。

十五、总结，到此为止，整个计算器就做出来了，大家会发现js部分很简单，因为我们只有一般的加减乘除计算，有更多想法的朋友，自己补充吧。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 #counter{
 width: 280px;
 height: 430px;
 background:#000;
 /* 背景色 */
 margin: 100px auto;
 /* 水平居中 */
 padding: 20px;
 /* 内部距离 */
 border-radius: 20px;
 }
 #inp{
 width: 270px;
 font-size: 36px;
 /* 字大小 */
 background: #4e4d4d;
 color: #fff;
 /* 字颜色 */
 margin: 20px 5px;
 /* 上下距离20，左右5 */
 border: none;
 /* 去掉边框 */
 }
 .cbt{
 width: 60px;
 height: 60px;
 background: #606060;
 color: white;
 /* 白色的字 */
 float: left;
 /* 左浮动 */
 margin: 5px;
 /* 外部距离5px */
 border-radius: 50%;
 /* 按钮圆角 */
 line-height: 60px;
 /* 垂直居中 */
 text-align: center;
 /* 水平居中 */
 cursor: pointer;
 /* 鼠标在上时为小手形 */
 font-size: 28px;
 /* 字体大小 */
 font-family: Arial;
 /* 字体 */
 }
 .hbt{
 height: 130px;
 line-height: 130px;
 /* 垂直居中 */
 border-radius: 60px;
 /* 宽高不一样，不能用百分比，改成像素的圆角 */
 float: right;
 }
 .wbt{
 width: 130px;
 border-radius: 60px;
 }
 .byellow{
 background: #d88f03;
 }
 .bwhite{
 background: #d4d4d4;
 color: #000000;
 /* 即然是白色了，字一定要变成黑色 */
 }
 </style>
</head>
<body>
 <div id="counter">
 <input type="text" id="inp">
 <div class="cbt bwhite" onclick="clickbt('')">C</div>
 <div class="cbt bwhite" onclick="clickbt('+')">+</div>
 <div class="cbt bwhite" onclick="clickbt('/')">/</div>
 <div class="cbt byellow" onclick="clickbt('*')">*</div>
 <div class="cbt" onclick="clickbt('7')">7</div>
 <div class="cbt" onclick="clickbt('8')">8</div>
 <div class="cbt" onclick="clickbt('9')">9</div>
 <div class="cbt byellow" onclick="clickbt('-')">-</div>
 <div class="cbt" onclick="clickbt('4')">4</div>
 <div class="cbt" onclick="clickbt('5')">5</div>
 <div class="cbt" onclick="clickbt('6')">6</div>
 <div class="cbt byellow" onclick="clickbt('+')">+</div>
 <div class="cbt" onclick="clickbt('1')">1</div>
 <div class="cbt" onclick="clickbt('2')">2</div>
 <div class="cbt" onclick="clickbt('3')">3</div>
 <div class="cbt hbt byellow" onclick="getcount()">=</div>
 <div class="cbt wbt" onclick="clickbt('0')">0</div>
 <div class="cbt" onclick="clickbt('.')">.</div>
 </div>
 <script>
 var einp = document.querySelector("#inp");
 var clickbt = (num) => {
 if (num == '') {
 einp.value = "";
 } else
 einp.value = einp.value + num;
 }
 // 如果num为空，则清空输入框einp，如果不为空，则累加到输入框
 var getcount = () => {
 einp.value = eval(einp.value);
 }
 </script>
</body>
</html>
相关推荐