javascript实现计算器功能

更新时间：2020年03月30日 15:01:38 作者：時間不夠以後

这篇文章主要为大家详细介绍了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>

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

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

您可能感兴趣的文章:

js
计算器

JavaScript仿微博输入框效果(案例分析)
这篇文章给大家分享一个小的JavaScript的案例，就是模仿微博输入框的效果，非常不错，对微博输入框效果感兴趣的朋友通过本文学习吧
2016-12-12
coffeescript使用的方式汇总
而来到CoffeeScript的世界，美妙故事再次上演。在写了几行代码后我相信你将不会再想念原生的Javascript了。CoffeeScript包含了许多新特性，当将它与jQuery，node.js,javascript结合时，你会发现一片新天地。
2015-08-08
在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法
chrome浏览器不管对于开发者还是一般用户都可以说是一个相当优秀的网页浏览器，但是在开发中，让人感觉很多余的一个特性就是，在表单项中的控件聚焦时总会出现一个黄色边框
2011-05-05
用jmSlip编写移动端顶部日历选择控件
这篇文章主要为大家详细介绍了利用jmSlip编写移动端顶部日历选择组件的方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
js过滤HTML标签完整实例
这篇文章主要介绍了js过滤HTML标签实现方法,以完整实例形式分析了JavaScript使用正则表达式过滤HTML标签的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
原生js实现网页顶部自动下拉/收缩广告效果
本文主要介绍了原生js实现网页顶部自动下拉/收缩广告效果的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
JavaScript实现左侧菜单效果
这篇文章主要为大家详细介绍了JavaScript实现左侧菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-12-12
js实现复选框的全选和取消全选效果
在很多网站都有这样的功能，当点击一个全选按钮之后，所有的复选框都会被选中，再点击之后会取消全选，功能非常的人性化，可以省却很多人力，本文将简单介绍一下JS如何实现此功能
2017-01-01
基于JS实现一个简单的投票demo
这篇文章主要介绍了如何利用JavaScript实现一个简单的投票demo，文中的示例代码讲解详细，对我们学习有一定参考价值，需要的可以参考一下
2022-06-06
js实现跨域的方法实例详解
这篇文章主要介绍了js实现跨域的方法,实例分析了几种常用的javascript实现跨域的技巧,需要的朋友可以参考下
2015-06-06

javascript实现计算器功能

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具