编程 Javascript

javascript实现计算器功能

Posted in Javascript onMarch 30, 2020

本文实例为大家分享了javascript实现计算器功能的具体代码，供大家参考，具体内容如下

javascript实现计算器功能

问题描述：

1、除法操作时，如果被除数为0，则结果为0
2、结果如果为小数，最多保留小数点后两位，如2 / 3 =0.67（显示0.67），1 / 2 = 0.5（显示0.5）

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>百度笔试0329</title>
 <style type="text/css">
 body, ul, li,select {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 ul,li {list-style: none;}
 .calculator {
  max-width: 300px;
  margin: 20px auto;
  border: 1px solid #eee;
  border-radius: 3px;
 }
 .cal-header {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #eee;
  text-align: center;
 }
 .cal-main {
  font-size: 14px;
 }
 .cal-main .origin-value {
  padding: 15px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: right;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
 }
 .cal-main .origin-type,
 .cal-main .target-type {
  padding-left: 5px;
  width: 70px;
  font-size: 14px;
  height: 30px;
  border: 1px solid #eee;
  background-color: #fff;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 3px;
 }
 .cal-keyboard {
  overflow: hidden;
 }
 .cal-items {
  overflow: hidden;
 }
 .cal-items li {
  user-select: none;
  float: left;
  display: inline-block;
  width: 75px;
  height: 75px;
  text-align: center;
  line-height: 75px;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  box-sizing: border-box;
 }
 li:nth-of-type(4n+1) {
  border-left: none;
 }
 li[data-action=operator] {
  background: #f5923e;
  color: #fff;
 }
 .buttons {
  float: left;
  width: 75px;
 }
 .buttons .btn {
  width: 75px;
  background-color: #fff;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  height: 150px;
  line-height: 150px;
  text-align: center;
 }
 .btn-esc {
  color: #ff5a34;
 }
 .btn-backspace {
  position: relative;
 }
 </style>
 </head>
 <body>
 <div class="calculator">
  <header class="cal-header">简易计算器</header>
  <main class="cal-main">
   <div class="origin-value">0</div>
   <div class="cal-keyboard">
    <ul class="cal-items">
     <li data-action="num">7</li>
     <li data-action="num">8</li>
     <li data-action="num">9</li>
     <li data-action="operator">÷</li>
     <li data-action="num">4</li>
     <li data-action="num">5</li>
     <li data-action="num">6</li>
     <li data-action="operator">x</li>
     <li data-action="num">1</li>
     <li data-action="num">2</li>
     <li data-action="num">3</li>
     <li data-action="operator">-</li>
     <li data-action="num">0</li>
     <li data-action="operator">清空</li>
     <li data-action="operator">=</li>
     <li data-action="operator">+</li>
    </ul>
   </div>
  </main>
 </div>
 <script type="text/javascript">
 var Calculator = {
  init: function () {
   var that = this;
   if (!that.isInited) {
    that.isInited = true;
    // 保存操作信息
    // total: Number, 总的结果
    // next: String, 下一个和 total 进行运算的数据
    // action: String, 操作符号
    that.data = {total: 0, next: '', action: ''};
    that.bindEvent();
   }
  },
  bindEvent: function () {
   var that = this;
   // 请补充代码：获取 .cal-keyboard 元素
   var keyboardEl = document.getElementsByClassName('cal-keyboard')[0]
   keyboardEl && keyboardEl.addEventListener('click', function (event) {
    // 请补充代码：获取当前点击的dom元素
    var target = event.target;
    // 请补充代码：获取target的 data-action 值
    var action = target.getAttribute('data-action');
    // 请补充代码：获取target的内容
    var value = target.innerHTML;
    if (action === 'num' || action === 'operator') {
     that.result(value, action === 'num');
    }
   });
  },
  result: function (action, isNum) {
   var that = this;
   var data = that.data;
   if (isNum) {
    data.next = data.next === '0' ? action : (data.next + action);
    !data.action && (data.total = 0);
   } else if (action === '清空') {
    // 请补充代码：设置清空时的对应状态
    data.total = 0;
    data.next = '';
    data.action = '';
   } else if (action === '=') {
    if (data.next || data.action) {
     data.total = that.calculate(data.total, data.next, data.action);
     data.next = '';
     data.action = '';
    }
   } else if (!data.next) {
    data.action = action;
   } else if (data.action) {
    data.total = that.calculate(data.total, data.next, data.action);
    data.next = '';
    data.action = action;
   } else {
    data.total = +data.next || 0;
    data.next = '';
    data.action = action;
   }
  
   // ���补充代码：获取 .origin-value 元素
   var valEl = document.getElementsByClassName('origin-value')[0];
   valEl && (valEl.innerHTML = data.next || data.total || '0');
  },
  calculate: function (n1, n2, operator) {
   n1 = +n1 || 0;
   n2 = +n2 || 0;
   if (operator === '÷') {
    // 请补充代码：获取除法的结果
  if(n2 == 0 || n1 == 0) return 0
    return Math.round((n1/n2)*100)/100;
   } else if (operator === 'x') {
    // 请补充代码：获取乘法的结果
    return n1 * n2;
   } else if (operator === '+') {
    // 请补充代码：获取加法的结果
    return n1 + n2;
   } else if (operator === '-') {
    // 请补充代码：获取减法的结果
    return n1 - n2;
   }
  }
 };
 Calculator.init();
 </script>
 </body>
</html>

更多计算器功能实现，请点击专题：计算器功能汇总进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

javascript实现计算器功能

- Author -

?r?不?蛞葬

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 解析Json字符串的性能比较分析代码

Dec 16 Javascript

jquery实现心算练习代码

Dec 06 Javascript

jquery对表单操作2

Apr 06 Javascript

javascript判断机器是否联网的2种方法

Aug 09 Javascript

使用GruntJS构建Web程序之Tasks（任务）篇

Jun 06 Javascript

javascript实现数字倒计时特效

Mar 30 Javascript

JS组件Bootstrap按钮组与下拉按钮详解

May 10 Javascript

Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析

Sep 17 Javascript

jQuery实现广告条滚动效果

Aug 22 jQuery

node puppeteer(headless chrome)实现网站登录

May 09 Javascript

js实现GIF图片的分解和合成

Oct 24 Javascript

Javascript摸拟自由落体与上抛运动原理与实现方法详解

Apr 08 Javascript

详解Webpack抽离第三方类库以及common解决方案

Mar 30 #Javascript

记一次react前端项目打包优化的方法

Mar 30 #Javascript

12 种使用Vue 的最佳做法

Mar 30 #Javascript

javascript实现简易数码时钟

Mar 30 #Javascript

vue计算属性+vue中class与style绑定(推荐)

Mar 30 #Javascript

Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

Mar 29 #Javascript

JS实现滑动拼图验证功能完整示例

Mar 29 #Javascript