如何使用JS编写一个简单的计算器

最新推荐文章于 2024-04-25 09:54:19 发布
最新推荐文章于 2024-04-25 09:54:19 发布
阅读量1.4w 收藏 26
点赞数 5
分类专栏： javaScript HTML5 文章标签： javascript 计算器-js精确计算
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luojiandecsdn/article/details/50837692
版权

首先，由于JS的存在数值的精度误差问题：

 0.1+0.2   //0.30000000000000004
 0.3-0.1   //0.19999999999999998

所以在编写计算器是应首先解决计算精度问题，以下四个代码段分别是js中精确的加减乘除运算函数

//浮点数加法运算
function floatAdd(arg1,arg2){
    var r1,r2,m;
    try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
    try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
    m=Math.pow(10,Math.max(r1,r2));
    return (arg1*m+arg2*m)/m
}
//浮点数减法运算
function floatSub(arg1,arg2){
    var r1,r2,m,n;
    try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
    try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
    m=Math.pow(10,Math.max(r1,r2));
    //动态控制精度长度
    n=(r1>=r2)?r1:r2;
    return ((arg1*m-arg2*m)/m).toFixed(n);
}
//浮点数乘法运算
function floatMul(arg1,arg2){
    var m=0,s1=arg1.toString(),s2=arg2.toString();
    try{m+=s1.split(".")[1].length}catch(e){}
    try{m+=s2.split(".")[1].length}catch(e){}
    return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}

//浮点数除法运算
function floatDiv(arg1,arg2) {
    var t1 = 0, t2 = 0, r1, r2;
    try {t1 = arg1.toString().split(".")[1].length} catch (e) {}
    try {t2 = arg2.toString().split(".")[1].length} catch (e) {}
    with (Math) {
        r1 = Number(arg1.toString().replace(".", ""));
        r2 = Number(arg2.toString().replace(".", ""));
        return (r1 / r2) * pow(10, t2 - t1);
    }
}

以下是详细的计算器代码：
HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单计算器</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
<div id="calculator">

        <div id="calculator_container">
           <h3>计算器</h3>
            <table id="calculator_table">
                <tbody>
                <tr>
                    <td colspan="5">
                        <input type="text" id="resultIpt" readonly="readonly" value="" size="17" maxlength="17" style="width:294px;color: black">
                    </td>
                </tr>
                <tr>
                    <td><input type="button" value="←"       class="btn_color1 btn_operation"></td>
                    <td><input type="button" value="全清"     class="btn_color1 btn_operation"></td>
                    <td><input type="button" value="清屏"     class="btn_color1"></td>
                    <td><input type="button" value="﹢/﹣"    class="btn_color2 btn_operation"></td>
                    <td><input type="button" value="1/×"     class="btn_color2 btn_operation"></td>
                </tr>
                <tr>
                    <td><input type="button"  value="7"     class="btn_color3 btn_number"></td>
                    <td><input type="button"  value="8"     class="btn_color3 btn_number"></td>
                    <td><input type="button"  value="9"     class="btn_color3 btn_number"></td>
                    <td><input type="button"  value="÷"    class="btn_color4 btn_operation"></td>
                    <td><input type="button"  value="％"    class="btn_color2 btn_operation"></td>
                </tr>
                <tr>
                    <td><input type="button"   value="4"   class="btn_color3 btn_number"></td>
                    <td><input type="button"   value="5"   class="btn_color3 btn_number"></td>
                    <td><input type="button"   value="6"   class="btn_color3 btn_number"></td>
                    <td><input type="button"   value="×"  class="btn_color4 btn_operation"></td>
                    <td><input type="button"   value="√"  class="btn_color2 btn_operation"></td>
                </tr>
                <tr>
                    <td><input type="button"  value="1"   class="btn_color3 btn_number"></td>
                    <td><input type="button"  value="2"   class="btn_color3 btn_number"></td>
                    <td><input type="button"  value="3"   class="btn_color3 btn_number"></td>
                    <td><input type="button"  value="－"  class="btn_color4 btn_operation"></td>
                    <td rowspan="2">
                        <input type="button"  value="＝"  class="btn_color2" style="height: 82px" id="simpleEqu">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button"  value="0"   class="btn_color3 btn_number" style="width:112px">
                    </td>
                    <td><input type="button"  value="."   class="btn_color3 btn_number" ></td>
                    <td><input type="button"  value="＋"  class="btn_color4 btn_operation"></td>
                </tr>
                </tbody>
            </table>

        </div>
</div>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>

CSS3

* {
    margin: 0;
    padding: 0;
}
#calculator{
    position: relative;
    margin: 50px auto;
    width: 350px;
    height: 400px;
    border: 1px solid gray;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 4px gray;
    -moz-box-shadow: 2px 2px 4px gray;
    box-shadow: 2px 2px 4px gray;
    behavior:url("ie-css3.htc");  /*IE8-*/
}
#calculator_table{
    position: relative;
    margin: 10px auto;
    border-collapse:separate;
    border-spacing:10px 20px;
}
h3{
    position: relative;
    width: 60px;
    height: 30px;
    margin: 0 auto;
}
#calculator_table td{
    width: 50px;
    height: 30px;
    border: 1px solid gray;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    behavior:url("ie-css3.htc");  /*IE8-*/
}
#calculator_table td input{
    font-size: 16px;
    border: none;
    width: 50px;
    height: 30px;
    color: white;
}
input.btn_color1{
    background-color: orange;
}
input.btn_color2{
    background-color: #133645;
}
input.btn_color3{
    background-color: #59807d;
}
input.btn_color4{
    background-color: seagreen;
}
input:active{
     -webkit-box-shadow: 3px 3px 3px gray;
     -moz-box-shadow: 3px 3px 3px gray;
     box-shadow: 3px 3px 3px gray;
     behavior:url("ie-css3.htc");  /*IE8-*/
 }

JS

window.onload=function() {
    var resultIpt = document.getElementById("resultIpt"); //获取输出文本框
    var btns_number = document.getElementsByClassName("btn_number"); //获取数字输入按钮
    var btns_operation = document.getElementsByClassName("btn_operation"); //获取操作按钮
    var simpleEqu = document.getElementById("simpleEqu"); //获取"="按钮
    var temp = "";
    var num1= 0,num2=0;
    //获取第一个数
    for(var i=0;i<btns_number.length;i++){
        btns_number[i].onclick=function (){
            temp += this.value;
            resultIpt.value = temp;
        };
    }
    //对获取到的数进行操作
   for(var j=0;j<btns_operation.length;j++) {
       btns_operation[j].onclick = function () {
           num1=parseFloat(resultIpt.value);
           oper = this.value;
           if(oper=="1/×"){
               num1 = Math.pow(num1,-1); //取倒数
               resultIpt.value = num1.toString();
           }else if(oper=="﹢/﹣"){    //取相反数
               num1 = -num1;
               resultIpt.value = num1.toString();
           }else if(oper=="√"){      //取平方根
               num1 =Math.sqrt(num1);
               resultIpt.value = num1.toString();
           }else if(oper=="←"){    //删除个位
               resultIpt.value = resultIpt.value.substring(0, resultIpt.value.length - 1);

           }else if(oper=="全清"){  //清除数字
               resultIpt.value = "";
           }
           else{          //oper=="＋" "－" "×" "÷" "％"时，继续输入第二数字
               temp = "";
               resultIpt.value = temp;
           }
       }
   }
    //输出结果
    simpleEqu.onclick=function(){
        num2=parseFloat(temp);  //取得第二个数字
        calculate(num1, num2, oper);
        resultIpt.value = result.toString();
    }
};

//定义一个计算函数
function calculate(num1, num2, oper) {
        switch (oper) {
            case "＋":
                result=floatAdd(num1, num2); //求和
                break;
            case "－":
                result=floatSub(num1, num2); //求差
                break;
            case "×":
                result=floatMul(num1, num2);  //求积
                break;
            case "÷":
                result=floatDiv(num1, num2);  //求商
                break;
            case "％":
                result=num1%num2;  //求余数
                break;
        }
    }

//精确计算
//浮点数加法运算
function floatAdd(arg1,arg2){
    var r1,r2,m;
    try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
    try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
    m=Math.pow(10,Math.max(r1,r2));
    return (arg1*m+arg2*m)/m
}
//浮点数减法运算
function floatSub(arg1,arg2){
    var r1,r2,m,n;
    try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
    try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
    m=Math.pow(10,Math.max(r1,r2));
    //动态控制精度长度
    n=(r1>=r2)?r1:r2;
    return ((arg1*m-arg2*m)/m).toFixed(n);
}
//浮点数乘法运算
function floatMul(arg1,arg2){
    var m=0,s1=arg1.toString(),s2=arg2.toString();
    try{m+=s1.split(".")[1].length}catch(e){}
    try{m+=s2.split(".")[1].length}catch(e){}
    return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}
//浮点数除法运算
function floatDiv(arg1,arg2) {
    var t1 = 0, t2 = 0, r1, r2;
    try {t1 = arg1.toString().split(".")[1].length} catch (e) {}
    try {t2 = arg2.toString().split(".")[1].length} catch (e) {}
    with (Math) {
        r1 = Number(arg1.toString().replace(".", ""));
        r2 = Number(arg2.toString().replace(".", ""));
        return (r1 / r2) * pow(10, t2 - t1);
    }
}
莫修
关注
  • 5
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用JavaScript 编写简单计算器
10-25
在JavaScript中创建一个简单的计算器是一项基础任务，可以帮助初学者理解事件处理、DOM操作以及基本的数学运算。以下是如何实现这个简单计算器的详细步骤和相关知识点： 1. **HTML 结构**： HTML 部分定义了一个...
用js来实现一个简单地计算器
aduan__的博客
01-15 5932
一、前端样式部分 首先我们需要给计算机来写一个外壳，我们使用html和css来实现计算器的样子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #outbox{/*計算機底座 */ width: 388px; height: 450px;
CSS：图片不拉伸，垂直居中显示
qq_42034498的博客
12-15 2102
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
js实现计算器方法
geng97280的博客
04-25 105
【代码】js实现计算器方法。
用js写一个计算器(很简单)
weixin_52630329的博客
12-19 3231
首先要知道我们常用的计算器都有哪些按键，有’0~9’，’+’ ,’ -’ , ‘*’, ‘/’，还有’=’ 和’.’，基本是这些按键，然后我们去创建一些按键。 之后我们去设置样式，设置完去js里写数据 获取上面的input var text = document.querySelector(‘input[type = text]’) 获取box下所有的input var bts = document.querySelectorAll(’.box input’) 获取box var box = docume
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
JS原生——编写简易计算器
m0_64954687的博客
12-06 9167
计算器
用js编写的简单的计算器代码程序
10-23
主要介绍了用js编写的简单的计算器代码程序，非常具有实用性,感兴趣的小伙伴可以参考下
js编写简易的计算器
12-28
本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下 使用绑定时间触发 加减乘除 加： 减： 乘： 除： 源代码： <body> 第一个数：<input type=text id=num1 /><p></p> ...
javascript编写简易计算器
10-19
在本教程中，我们将探讨如何使用JavaScript来创建一个简单的计算器。这个计算器的界面由HTML构建，样式由CSS定义，而核心逻辑则通过JavaScript实现。以下是我们将深入讨论的知识点： 1. **HTML 结构**： - `<div>`...
使用 JavaScript 编写的提示计算器.zip
最新发布
07-01
小费计算器是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这个项目很有趣。用户可以计算从单笔账单支付中可以获得的小费金额。此外，用户可以将小费分成几份。  项目制作 小费计算器项目仅包含 HTML、CSS 和...
用javascript编写的一个简单的计算器
01-09
用于简单的加减乘除运算 运用javascript技术实现简单的加减乘除运算。。。
JavaScript 用两种方法做一个简易计算器
weixin_45899362的博客
03-09 7879
第一种 使用基本数据类型 注意点： prompt 用户从浏览器输入的任何数据都是字符串型的，使用数字需要强制转换 // 简易对象器 function input1(){ var num1 = prompt('请输入第一个数:'); return parseFloat(num1); } function input2(){ var num2 = prompt('请输入第二个数:'); return parseFloat(num2); } // 1. 加法运算 function
js做一个简单的计算器
2201_75705263的博客
04-02 1005
js；css； html
JavaScript 用三种方法做一个简易计算器
m0_62496369的博客
10-21 7495
new关键字执行过程 // 1.new构造函可以在内存中创建了一个空的对象 // 2.this就会指向刚才创建的空对象 // 3.执行构造函数里面的代码 给这个空对象添加属性和方法 // 4.返回这个新对象(所以构造函数里面不需要return)
JS：做个计算器
weixin_50517811的博客
06-26 1301
JS实现计算器功能
javascript制作简易计算器,javascript简易计算器代码
chatgpt001的博客
11-09 2332
计算器*{margin: 0;padding: 0;body{.box{.box h2{.box a{.box .sp{789X456-1
使用JS完成一个简单的计算器功能
chuisiqin5881的博客
05-08 2543
<!DOCTYPEhtml> <html> <head> <title>事件</title> <scripttype="text/javascript"> functioncount(){ ...
JS基础-做一个简易计算器
qq_43781887的博客
04-11 1722
思路：采用函数和switch来完成，每完成一个功能之后又要重新输入数字，直到输入数字5就停止程序，所以要采用while循环来实现输入部分。代码如下： <script> //简易计算器 function conuter(number) { switch (number) { case "1": var number1 = Number(prompt("请输入第一...
使用Javascript编写一个简单计算器
03-30
以下是一个简单的计算器，使用Javascript编写： ```html <!DOCTYPE html> 简单计算器 input[type="button"] { width: 50px; height: 50px; font-size: 20px; margin: 5px; } input[type=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值