首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现简单计算器

Posted in Javascript onNovember 22, 2015

参考部分资料，编写一个简单的计算器案例，虽然完成了正常需求，但是也有不满之处，待后续实力提升后再来补充，先把不足之处列出：

1：本来打算只要打开页面，计算器的输入框会显示一个默认为0的状态，但是在输入框加入默认显示为0的时候，选择数据输入时，该0会显示输入数字的前面，例如”0123“，由于能力有限，待后续实力提升再来补充完善！

2：目前只能实现鼠标控制选择按钮，待完善键盘录入功能。

3：乘法的那个符号在本来想改成”ד这个符号的，待后续完善。

附图片一张：

js实现简单计算器

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>计算器</title>
</head>
<body onload="onLoad()">
<div id="calculator">
  <div class="LOGO">
    <span class="name">简单的计算器</span>
    <span class="verson">@liumobai v1.0</span>
  </div>
  <div id="shuRu">
    <!--screen输入栏-->
    <div class="screen">
      <input type="text" id="screenName" name="screenName" class="screen" value="" onfocus="jsq(this)">
    </div>
  </div>
  <div id="keys">
    <!-- operators and other keys -->
    <!--第一排-->
    <input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons">
    <input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons">
    <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">
    <input type="button" id="Back" onclick="tuiGe()" value="Back" class="buttons">
    <input type="button" id="C" onclick="clearNum()" value="C" class="buttons" style="margin-right:0px">
    <!--第二排-->
    <input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons">
    <input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons">
    <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">
    <input type="button" id="*" onclick="jsq(this.id)" value="*" class="buttons">
    <input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px">
    <!--第三排-->
    <input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons">
    <input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons">
    <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">
    <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons">
    <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px">
    <!--第四排-->
    <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons">
    <input type="button" id="00" onclick="jsq(this.id)" value="00" class="buttons">
    <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons">
    <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons">
    <input type="button" id="eva" onclick="eva()" value="=" class="buttons" style="margin-right:0px">
  </div>
  <div class="footer">
    <span class="aside">欢迎使用JavaScript计算器</span>
      <span class="link">
        <a href="#" title="声明" target="_blank">反馈</a>
      </span>
  </div>
</div>
</body>
</html>

JS部分：

<script>
  var num = 0; // 定义第一个输入的数据
  function jsq(num) {
    //获取当前输入
    document.getElementById('screenName').value += document.getElementById(num).value;
  }
  function eva() {
    //计算输入结果
    document.getElementById("screenName").value = eval(document.getElementById("screenName").value);
  }
  function clearNum() {
    //清0
    document.getElementById("screenName").value = null;
    document.getElementById("screenName").focus();
  }
  function tuiGe() {
    //退格
    var arr = document.getElementById("screenName");
    arr.value = arr.value.substring(0, arr.value.length - 1);
  }
  function onLoad(){
    //加载完毕后光标自动对应到输入框
    document.getElementById("screenName").focus();
  }
</script>

CSS部分：　

/*Basic reset*/
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font: 14px Arial,sans-serif;
}
html{
  height:100%;
  background-color:lightslategrey;
}

#calculator{
  margin: 15px auto;
  width:330px;
  height:400px;
  border: 1px solid lightgray;
  background-color:darkgrey;
  padding:15px;
}

/*LOGO*/
.LOGO{
  height:20px;

}
.LOGO .name{
  float:left;
  line-height:30px;
}
.LOGO .verson{
  float:right;
  line-height:30px;
}
/*screen*/
#shuRu{
  margin-top:15px;
}
.screen{
  margin-top:5px;
  width:300px;
  height:40px;
  text-align: right;
  padding-right:10px;
  font-size:20px;
}
#keys{
  border:1px solid lightgray;
  height:223px;
  margin-top:25px;
  padding:8px;
}
#keys .last{
  margin-right:0px;
}
.footer{
  margin-top:20px;
  height:20px;
}
.footer .link{
  float:right;
}

#keys .buttons{
  float:left;
  width: 42px;
  height: 36px;
  text-align:center;
  background-color:lightgray;
  margin: 0 17px 20px 0;
}

接下来再给大家分享一则实例

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
       input[type=button]
       {
           width:25px;
           height:25px;
       }
    </style>
    <script type="text/javascript">
       var result=0;
      var point=false;       //判断是小数点前还是后
      var multiple=0.1;         //初始化小数点后的倍率
      var sort=0;              //标记加减乘除
      var temp=0;                //记录上一轮结果
      function onbutton0()    //数字按钮动作
       {
         var name=document.getElementByIdx_x("show");
           if(!point) result=10*result+0;       //小数点前的处理
           else                                    //小数点后的处理
           {
              result=result+multiple*0;
              multiple=multiple*0.1;
           }
           name.value=String(result);
       }
       function onbutton1()
       {
         var name=document.getElementByIdx_x("show");
           if(!point) result=10*result+1;
           else
           {
              result=result+multiple*1;
              multiple=multiple*0.1;
           }
           name.value=String(result);
       }
       function onbutton2()
       {
         var name=document.getElementByIdx_x("show");
           if(!point) result=10*result+2;
           else
           {
              result=result+multiple*2;
              multiple=multiple*0.1;
           }
           name.value=String(result);
       }
       function onbutton3()
       {
         var name=document.getElementByIdx_x("show");
           if(!point) result=10*result+3;
           else
           {
              result=result+multiple*3;
              multiple=multiple*0.1;
           }
           name.value=String(result);
       }
       function onbutton4()
       {
         var name=document.getElementByIdx_x("show");
           if(!point) result=10*result+4;
           else
           {
              result=result+multiple*4;
              multiple=multiple*0.1;
           }
           name.value=String(result);
       }
       function onbutton5()
       {
         var name=document.getElementByIdx_x("show");
           if(!point) result=10*result+5;
           else
           {
              result=result+multiple*5;
              multiple=multiple*0.1;
           }
           name.value=String(result);
       }
       function onbutton6()
       {
         var name=document.getElementByIdx_x("show");
           if(!point) result=10*result+6;
           else
           {
              result=result+multiple*6;
              multiple=multiple*0.1;
           }
           name.value=String(result);
       }
       function onbutton7()
       {
         var name=document.getElementByIdx_x("show");
           if(!point) result=10*result+7;
           else
           {
              result=result+multiple*7;
              multiple=multiple*0.1;
           }
           name.value=String(result);
       }
       function onbutton8()
       {
         var name=document.getElementByIdx_x("show");
           if(!point) result=10*result+8;
           else
           {
              result=result+multiple*8;
              multiple=multiple*0.1;
           }
           name.value=String(result);
       }
       function onbutton9()
       {
         var name=document.getElementByIdx_x("show");
           if(!point) result=10*result+9;
           else
           {
              result=result+multiple*9;
              multiple=multiple*0.1;
           }
           name.value=String(result);
       }
       function onbutton_point()           //小数点按钮
       {
          var name=document.getElementByIdx_x("show");
           point=true;
           name.value=String(result)+".";
       }
       function onbutton_back()        //退格按钮
       {
           var name=document.getElementByIdx_x("show");
           var temp=name.value;
           name.value="";
           for(var i=0;i<temp.length-1;i++)
              name.value+=temp[i];
       }
       function onbutton_plus()
       {
           var name=document.getElementByIdx_x("show");
           point=false;
           multiple=0.1;
           switch (sort)                       //遇到下一个操作符时判断上一个操作符是什么，并进行上一个操作符的计算
           {                                  //eg:1+2+3=  遇到第二个+时判断前一个符号，发现是+则进行+运算，得到3赋给result
              case 1:result=result+temp;
                   break;
              case 2:result=temp-result;
                   break;
              case 3:result=temp*result;
                   break;
              case 4:result=temp/result;
                   break;
           }
           sort=1;
           temp=result;
           result=0;
           name.value="0";
       }
       function onbutton_minus()
       {
           var name=document.getElementByIdx_x("show");
           point=false;
           multiple=0.1;
           switch (sort)
           {
              case 1:result=result+temp;
                   break;
              case 2:result=temp-result;
                   break;
              case 3:result=temp*result;
                   break;
              case 4:result=temp/result;
                   break;
           }
           sort=2;
           temp=result;
           result=0;
           name.value="0";
       }
       function onbutton_mult()
       {
           var name=document.getElementByIdx_x("show");
           point=false;
           multiple=0.1;
           switch (sort)
           {
              case 1:result=result+temp;
                   break;
              case 2:result=temp-result;
                   break;
              case 3:result=temp*result;
                   break;
              case 4:result=temp/result;
                   break;
           }
           sort=3;
           temp=result;
           result=0;
           name.value="0";
       }
       function onbutton_div()
       {
           var name=document.getElementByIdx_x("show");
           point=false;
           multiple=0.1;
           switch (sort)
           {
              case 1:result=result+temp;
                   break;
              case 2:result=temp-result;
                   break;
              case 3:result=temp*result;
                   break;
              case 4:result=temp/result;
                   break;
           }
           sort=4;
           temp=result;
           result=0;
           name.value="0";
       }
       function onbutton_equal()
       {
           var name=document.getElementByIdx_x("show");
           point=false;                //重置
           multiple=0.1;               //重置
           switch (sort)
           {
              case 1:result=result+temp;
                   break;
              case 2:result=temp-result;
                   break;
              case 3:result=temp*result;
                   break;
              case 4:result=temp/result;
                   break;
           }
           sort=0;                       //重置
           temp=result;
           result=0;
           name.value=String(temp);
       }
       function onbutton_clear()   //重置为初始状态
       {
           result=0;
         point=false;      
         multiple=0.1;        //初始化小数点后的倍率
         sort=0;             //标记加减乘除
         temp=0;               //记录上一轮结果
         var name=document.getElementByIdx_x("show");
         name.value="0";
       }
    </script>
</head>
 
<body>
    <table align="center">
      <tr>
        <td colspan="5"><input type="text" value="0" id="show"></td>
      </tr>
      <tr>
         <td><input type="button" value="7" onclick="onbutton7();"></td>
         <td><input type="button" value="8" onclick="onbutton8();"></td>
         <td><input type="button" value="9" onclick="onbutton9();"></td>
         <td><input type="button" value="/" onclick="onbutton_div();"></td>
         <td><input type="button" value="<" onclick="onbutton_back();"></td>
      </tr>
      <tr>
        <td><input type="button" value="4" onclick="onbutton4();"></td>
         <td><input type="button" value="5" onclick="onbutton5();"></td>
         <td><input type="button" value="6" onclick="onbutton6();"></td>
         <td><input type="button" value="*" onclick="onbutton_mult();"></td>
         <td><input type="button" value="C" onclick="onbutton_clear();"></td>
      </tr>
      <tr>
        <td><input type="button" value="1" onclick="onbutton1();"></td>
         <td><input type="button" value="2" onclick="onbutton2();"></td>
         <td><input type="button" value="3" onclick="onbutton3();"></td>
         <td><input type="button" value="-" onclick="onbutton_minus();"></td>
         <td rowspan="2"><input type="button" value="=" style="width:25px;height:57px;" onclick="onbutton_equal();"></td>
      </tr>
      <tr>
        <td colspan="2"><input type="button" value="0" style="width:57px;height:25px;" onclick="onbutton0();"></td>
         <td><input type="button" value="." onclick="onbutton_point();"></td>
         <td><input type="button" value="+" onclick="onbutton_plus();"></td>
      </tr>
   </table>
</body>
</html>

js实现简单计算器

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
喜大普奔！jQuery发布 3.0 最终版
Jun 12 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
详解基于Vue，Nginx的前后端不分离部署教程
Dec 04 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 #Javascript
解决jquery插件：TypeError:$.browser is undefined报错的方法
Nov 21 #Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 #Javascript
分享经典的JavaScript开发技巧
Nov 21 #Javascript
jQuery实现分隔条左右拖动功能
Nov 21 #Javascript
超详细的javascript数组方法汇总
Nov 21 #Javascript
javascript实现动态统计图开发实例
Nov 21 #Javascript
ipad(1) 速龙(1) GTX1660(1) win10(43) win11(40) i5 10400(1) i7 6700(1) Tomcat(18) i5 9400(1) 窗口函数(3)
You might like
Zerg剧情介绍
2020/03/14 星际争霸
php学习之 数组声明
2011/06/09 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
JS hashMap实例详解
2016/05/26 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
小程序开发实战：实现九宫格界面的导航的代码实现
2017/01/19 Javascript
Javascript同时声明一连串（多个）变量的方法
2017/01/23 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
Python3中的bytes和str类型详解
2019/05/02 Python
python tornado使用流生成图片的例子
2019/11/18 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
美国生鲜及杂货电商：FreshDirect
2018/01/29 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
关于运动会的口号
2014/06/07 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
自荐信格式范文
2015/03/04 职场文书
尼克胡哲观后感
2015/06/08 职场文书
服务行业标语口号
2015/12/26 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis