首页
所有分类
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中dequeue()方法用法实例
Dec 29 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
微信小程序开发经验总结（推荐）
Jan 11 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
JavaScript实现切换多张图片
Jan 27 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
德生1994(1) 纸巾盒(1) PR-D3L(1) CPU(2) 天梯图(1) ICF-SW100(1) SRF-40W(1) ICF-F10(1) 德生G88(1) AE3805(1)
You might like
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP实现微信对账单处理
2018/10/01 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
vue点击当前路由高亮小案例
2019/09/26 Javascript
Python实现XML文件解析的示例代码
2018/02/05 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python代码过长的换行方法
2018/07/19 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python学生管理系统
2019/01/30 Python
实例详解Python模块decimal
2019/06/26 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
python关于倒排列的知识点总结
2020/10/13 Python
matplotlib之多边形选区（PolygonSelector）的使用
2021/02/24 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
波兰在线儿童和婴儿用品零售商：pinkorblue
2019/06/29 全球购物
应届生个人求职信模板
2013/11/26 职场文书
助学贷款贫困证明
2014/09/23 职场文书
节约用电倡议书
2015/04/28 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
Python time库的时间时钟处理
2021/05/02 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL