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实现给指定元素的后面追加内容
Apr 10 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
JS中如何优雅的使用async await详解
Oct 05 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
php封装一个异常的处理类
2017/06/08 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
python操作字典类型的常用方法(推荐)
2016/05/16 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
【python】matplotlib动态显示详解
2019/04/11 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
旅游项目开发策划书
2014/01/18 职场文书
会计学生自我鉴定
2014/02/06 职场文书
保研导师推荐信
2015/03/25 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
2016七夕情人节感言
2015/12/09 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js