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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
使用js画图之饼图
Jan 12 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 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
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
微信小程序实现星级评分和展示
2018/07/05 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
使用Python处理BAM的方法
2018/09/28 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python dict如何定义
2020/09/02 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
闭幕式主持词
2014/04/02 职场文书
安全教育观后感
2015/06/17 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
技术入股合作协议书
2016/03/21 职场文书