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 相关文章推荐
js类 from qq
Nov 13 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 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
laravel中Redis队列监听中断的分析
2020/09/14 PHP
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python自动抢红包教程详解
2019/06/11 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
python urllib和urllib3知识点总结
2021/02/08 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
总经理助理的职责
2014/03/14 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
农村门前三包责任书
2014/07/25 职场文书
股份合作协议书
2014/09/10 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
房产电话营销开场白
2015/05/29 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript