基于javascript实现简单计算器功能


Posted in Javascript onJanuary 03, 2016

本文实例为大家介绍javascript实现简单计算器功能的详细代码,分享给大家供大家参考,具体内容如下

效果图:

基于javascript实现简单计算器功能

实现代码:

<html> 
  <head> 
    <script> 
      function calc(event){ 
        // test  
        //window.alert(event.value); 
        var val = new String(event.value); 
        // clear space 
        val = val.trim(); 
        var res = document.getElementById("res"); 
        // clear 
        if(val == "clear"){ 
          res.value = ""; 
        } 
 
        // back 
        if(val == "back"){ 
          res.value = res.value.substring(0, res.value.length - 1); 
        } 
 
        // power 
        if(val == "power"){ 
          val = "p"; 
        } 
        // add val to text 
        if(val.length == 1 && val != "="){ 
          res.value = res.value + val; 
        } 
  
        // calc result 
        if(val == "="){ 
          var arr; 
          var result; 
          // power 
          if(res.value.indexOf("p") != -1){ 
            arr = res.value.split("p"); 
            //window.alert(arr); 
             result = Math.pow(parseFloat(arr[0]) ,parseFloat(arr[1])); 
            //window.alert(res); 
            res.value = result; 
          }       
          // plus 
          if(res.value.indexOf("+") != -1){ 
            arr = res.value.split("+"); 
            //window.alert(arr); 
             result = parseFloat(arr[0]) + parseFloat(arr[1]); 
            //window.alert(res); 
            res.value = result; 
          } else if(res.value.indexOf("-") != -1){ 
            // minus 
            arr = res.value.split("-"); 
            //window.alert(arr); 
            result = parseFloat(arr[0]) - parseFloat(arr[1]); 
            //window.alert(res); 
            res.value = result; 
          } else if(res.value.indexOf("*") != -1){ 
            // multiply 
            arr = res.value.split("*"); 
            //window.alert(arr); 
            result = parseFloat(arr[0]) * parseFloat(arr[1]); 
            //window.alert(res); 
            res.value = result; 
          } else if(res.value.indexOf("/") != -1){ 
            // division 
            arr = res.value.split("/"); 
            //window.alert(arr); 
            result = parseFloat(arr[0]) / parseFloat(arr[1]); 
            //window.alert(res); 
            res.value = result; 
          } else if(res.value.indexOf("%") != -1){ 
            // module 
            arr = res.value.split("%"); 
            //window.alert(arr); 
            result = parseFloat(arr[0]) % parseFloat(arr[1]); 
            //window.alert(res); 
            res.value = result; 
          } 
        }   
      } 
    </script> 
  </head> 
  <body> 
    <table border="1px" cellpadding="10px" cellspacing="5px" align="center"> 
      <tr align="center"> 
        <td colspan="4"><input type="text" id="res" size="35px" value="" style="text-align:right;"/></td> 
      </tr> 
      <tr align="center"> 
        <td><input type="button" value="power" onclick="calc(this)"/></td> 
        <td><input type="button" value="clear" onclick="calc(this)"/></td> 
        <td colspan="2"><input type="button" value="   back   " onclick="calc(this)"/></td> 
      </tr> 
      <tr align="center"> 
        <td><input type="button" value="  1  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  2  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  3  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  +  " onclick="calc(this)"/></td> 
      </tr> 
      <tr align="center"> 
        <td><input type="button" value="  4  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  5  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  6  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  -  " onclick="calc(this)"/></td> 
      </tr> 
      <tr align="center"> 
        <td><input type="button" value="  7  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  8  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  9  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  *  " onclick="calc(this)"/></td> 
      </tr> 
      <tr align="center"> 
        <td><input type="button" value="  0  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  =  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  %  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  /  " onclick="calc(this)"/></td> 
      </tr> 
    </table> 
  </body> 
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
javascript每日必学之循环
Feb 19 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
详解Javascript事件驱动编程
Jan 03 #Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 #Javascript
js实现搜索框关键字智能匹配代码
Mar 26 #Javascript
javascript合并表格单元格实例代码
Jan 03 #Javascript
JS Array.slice 截取数组的实现方法
Jan 02 #Javascript
jquery实现简单的全选和反选功能
Jan 02 #Javascript
基于Javascript实现弹出页面效果
Jan 01 #Javascript
You might like
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
CCPry JS类库 代码
2009/10/30 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
介绍一下Make? 为什么使用make
2013/12/08 面试题
大学生简单自荐信
2013/11/10 职场文书
银行员工辞职信范文
2014/01/20 职场文书
不假外出检讨书
2014/01/27 职场文书
六查六看自查材料
2014/02/17 职场文书
高中军训第一天感言
2014/03/06 职场文书
三年级学生评语
2014/04/23 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
小学庆六一主持词
2015/06/30 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
六五普法心得体会2016
2016/01/21 职场文书
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript