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 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
ExtJS下grid的一些属性说明
Dec 13 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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
You might like
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
python3.0 字典key排序
2008/12/24 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python实现与redis交互操作详解
2020/04/21 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
详解python tcp编程
2020/08/24 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
小班重阳节活动方案
2014/02/08 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
小学课外活动总结
2014/07/09 职场文书
综合实践活动报告
2015/02/05 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
失恋33天观后感
2015/06/11 职场文书