计算器

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./main.css" />
  <title>Simple Calculator</title>
</head>
<body>
  <main id="main">
    <div id="calculator">
      <div class="display">0</div>
      <div class="buttons-wrapper">
        <div class="row">
          <div class="col"><span class="btn lightgray" action="clear">AC</span></div>
          <div class="col"><span class="btn lightgray" action="negative">+/-</span></div>
          <div class="col"><span class="btn lightgray" action="percentage">%</span></div>
          <div class="col"><span class="btn orange" operator="/">/</span></div>
        </div>
        <div class="row">
          <div class="col"><span class="btn" number="7">7</span></div>
          <div class="col"><span class="btn" number="8">8</span></div>
          <div class="col"><span class="btn" number="9">9</span></div>
          <div class="col"><span class="btn orange" operator="*">X</span></div>
        </div>
        <div class="row">
          <div class="col"><span class="btn" number="4">4</span></div>
          <div class="col"><span class="btn" number="5">5</span></div>
          <div class="col"><span class="btn" number="6">6</span></div>
          <div class="col"><span class="btn orange" operator="-">-</span></div>
        </div>
        <div class="row">
          <div class="col"><span class="btn" number="1">1</span></div>
          <div class="col"><span class="btn" number="2">2</span></div>
          <div class="col"><span class="btn" number="3">3</span></div>
          <div class="col"><span class="btn orange" operator="+">+</span></div>
        </div>
        <div class="row">
          <div class="col col-2x"><span class="btn" number="0">0</span></div>
          <div class="col"><span class="btn" number=".">.</span></div>
          <div class="col"><span class="btn orange" action="getResult">=</span></div>
        </div>
      </div>
    </div>
  </main>
  <script src="./calculator.js" charset="utf-8"></script>
  <script charset="utf-8" type="text/javascript">
    window.addEventListener('DOMContentLoaded', () => {
      new Calculator().bind(document.querySelector('#calculator'));
    });
  </script>
</body>
</html>

View Code

main.css

html, body {
  font-size: 14px;
  margin: 0px;
  padding: 0px;
  background-color: lightgray;
}

#main {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#calculator {
  display: flex;
  flex-direction: column;
  height: 530px;
   320px;
  background-color: #000;
  box-shadow: 0px 0px 6px 0px #fff;
  padding-top: 24px;
  box-sizing: border-box;
}

#calculator .display {
  font-size: 48px;
  color: #fff;
  text-align: right;
  height: 88px;
  line-height: 88px;
  padding: 0px 12px;
  overflow-x: auto;
  padding: 0px 12px;
  box-sizing: border-box;
  white-space: nowrap;
}

#calculator .buttons-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#calculator .buttons-wrapper .row {
  display: flex;
  flex-direction: row;
}

#calculator .buttons-wrapper .row .col {
  flex: 1;
}

#calculator .buttons-wrapper .row .col.col-2x {
  flex: 2;
}

#calculator .buttons-wrapper .row .col .btn {
  display: block;
  color: #fff;
  text-align: center;
  height: 60px;
  line-height: 60px;
  border-radius: 30px;
  font-size: 18px;
  background-color: gray;
  margin: 10px;
  user-select: none;
}

#calculator .buttons-wrapper .row .col .btn.orange {
  background-color: orange;
}

#calculator .buttons-wrapper .row .col .btn.lightgray {
  background-color: lightgray;
  color: #000;
}

View Code

calculator.js

(function(global) {

  class Calculator {

    constructor() {

    }

    set display(text) {
      this.$display.innerText = text;
      this.$display.scrollLeft = this.$display.clientWidth
    }
    get display() {
      return this.$display.innerText;
    }

    bind(element) {
      this.root = element;
      this.initView();
    }

    initView() {
      this.$display = this.root.querySelector('.display');
      this.$btns = this.root.querySelectorAll('.btn');

      // 对动作按钮进行事件绑定
      Array.from(this.$btns).filter(btn => btn.getAttribute('action')).forEach(btn => {
        btn.addEventListener('click', event => {
          this[btn.getAttribute('action')].call(this, event);
        });
      });

      // 对数字按钮进行事件绑定
      Array.from(this.$btns).filter(btn => btn.getAttribute('number')).forEach(btn => {
        btn.addEventListener('click', event => {
          if(!this.value){
            this.value = '';
            this.display = '';
          }
          this.value += btn.getAttribute('number');
          this.display += btn.getAttribute('number');
        });
      });

      // 对操作符按钮进行事件绑定
      Array.from(this.$btns).filter(btn => btn.getAttribute('operator')).forEach(btn => {
        btn.addEventListener('click', event => {
          if(!this.value) {
            return false;
          }
          this.operator = btn.getAttribute('operator');
          this.previous = Number(this.value);
          this.value = '';
          this.display = this.operator;
        });
      });
    }

    /**
     * 清屏
     */
    clear() {
      this.value = null;
      this.display = '0';
    }

    /**
     * 百分比
     */
    percentage() {
      if(this.value) {
        this.value = Number(this.value) / 100;
        this.display = this.value;
      }
    }

    /**
     * 正负转换
     */
    negative() {
      if(this.value) {
        this.value = - Number(this.value);
        this.display = this.value;
      }
    }

    /**
     * 计算结果
     */
    getResult() {
      if(!this.value || !this.operator || !this.previous) {
        return false;
      }
      try {
        let value = eval(`${ this.previous } ${ this.operator } ${ this.value }`);
        if(value - (value | 0)) {
          value = value.toFixed(2);
        }
        this.value = value;
        this.display = value;
      } catch (e) {
        this.display = e.message;
      }
      this.operator = null;
      this.previous = null;
    }

  }

  global.Calculator = Calculator;

}(this));

View Code

相关阅读:
JEECG弹出框提交表单
 JEECG开发第一个菜单显示设备列表
 优化jeecg底层高级查询，支持bool值和下拉框查询
 Jeecg中的<t:datagrid treegrid="true">实现
 JEECG 简单实例讲解权限控制
 jeecg 定时任务配置用法
 帆软报表和jeecg的进一步整合--ajax给后台传递map类型的参数
 JEECG与帆软报表集成
 helm部署Redis哨兵集群
 helm安装kafka集群并测试其高可用性
原文地址：https://www.cnblogs.com/pengfei25/p/9174412.html