用JS语言编写计算机

最新推荐文章于 2021-06-23 06:10:24 发布

domunweb

最新推荐文章于 2021-06-23 06:10:24 发布

阅读量3.2k

点赞数 3

分类专栏：前端文章标签： javascript 博客计算机

本文链接：https://blog.csdn.net/domunweb/article/details/73610860

版权

前端专栏收录该内容

23 篇文章 3 订阅

订阅专栏

本周因为要考试，所以博客写的有些迟。上周我们JS没有学习新的内容，对之前学的知识进行了总结复习。喜欢搞事情的我们做出来了一个本人感觉很有趣的东西，简易计算器。
下面是代码部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>计算机</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            table{width: 400px;margin: 30px auto;}
            table tr td{ width: 100px;height: 52px;text-align: center;line-height: 50px;}
            td input[type=button]{width: 99%;height: 99%;font-size: 32px;background: #ddd;border: none;}
            td input[type=text]{width: 99%;height: 99%;text-align: right;font-size: 32px;}
            #show{margin-bottom: 10px;}
            .btn:hover {background: #ccc;}
        </style>
    </head>
    <body>
        <table cellspacing="0" cellpadding="0">
            <tr><td colspan="4"><input type="text" disabled id="show" value="" /></td></tr>
            <tr>
                <td colspan="2"><input class="btn" type="button"id="" value="DEL" /> </td>
                <td colspan="2"><input class="btn" type="button"id="" value="C" /> </td>
            </tr>
            <tr>
                <td><input class="btn" type="button" value="1" /></td>
                <td><input class="btn" type="button" value="2" /></td>
                <td><input class="btn" type="button" value="3" /></td>
                <td><input class="btn" type="button" value="+" /></td>
            </tr>
            <tr>
                <td><input class="btn" type="button" value="4" /></td>
                <td><input class="btn" type="button" value="5" /></td>
                <td><input class="btn" type="button" value="6" /></td>
                <td><input class="btn" type="button" value="-" /></td>
            </tr>
            <tr>
                <td><input class="btn" type="button" value="7" /></td>
                <td><input class="btn" type="button" value="8" /></td>
                <td><input class="btn" type="button" value="9" /></td>
                <td><input class="btn" type="button" value="*" /></td>
            </tr>
            <tr>
                <td><input class="btn" type="button" value="." /></td>
                <td><input class="btn" type="button" value="0" /></td>
                <td><input class="btn" type="button" value="=" /></td>
                <td><input class="btn" type="button" value="/" /></td>
            </tr>
        </table>

        <script type="text/javascript">
            var txt=document.getElementById("show");
            var obtn=document.getElementsByClassName("btn");
            var arr=[];

            //alert(obtn.length);
            for(var i=0;i<obtn.length;i++){

                obtn[i].onclick=function(){
                    //判断是否为数字
                    if(!isNaN(this.value)||this.value=="."){
                        if(txt.value.indexOf(".")== -1){
                            txt.value +=this.value;
                        }else if(this.value!="."){
                                txt.value +=this.value;
                            }else{
                            if(txt.value.indexOf("+")!=-1||txt.value.indexOf("-")!=-1||txt.value.indexOf("*")!=-1||txt.value.indexOf("/")!=-1){
                            //alert(1);
                            arr[arr.length]=txt.value;
                            txt.value=this.value;
                            }
                        }

                    }else if(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/"){
                            if(txt.value.indexOf("+")==-1||txt.value.indexOf("-")==-1||txt.value.indexOf("*")==-1||txt.value.indexOf("/")==-1){
                                arr[arr.length]=txt.value;
                                txt.value=this.value;

                            }
                    }else if(this.value=="="){
                        arr[arr.length]=txt.value;
                        var str="";
                        for(var a in arr){
                            str+=arr[a];
                        }
                        txt.value=eval(str);
                        //eval(),,专门用来计算表达式标签。
                    }else if(this.value=="C"){
                        txt.value="";
                        arr=[];
                    }else if(this.value=="DEL"){
                        txt.value = txt.value.substr(0, txt.value.length - 1);
                    }
                    //console.log(arr);
                }

            }
        </script>
    </body>
</html>

运行结果：

这里写图片描述

html和css部分还和之前的一样比较简单，定义所有的按钮和显示屏幕，再给html内容加样式。这里的显示屏我们用<input type="text" disabled id="show" value="" /> 加disabled语句使输入框不能输入内容。接下来就用JS语句来做(搞)东(事)西(情)。

先获取到所有的元素，定义一个空数组下面用：

var txt=document.getElementById("show");
            var obtn=document.getElementsByClassName("btn");
            var arr=[];

再用for循环和点击函数来获取到所有的按钮：

for(var i=0;i<obtn.length;i++){

                obtn[i].onclick=function(){}    
}

此处建议大家做的时候经常用console.log()或者alert()来测试是否获取到按钮。

接下来用if语句判断按钮添加事件:

if(!isNaN(this.value)||this.value=="."){
                        if(txt.value.indexOf(".")== -1){
                            txt.value +=this.value;
                        }else if(this.value!="."){
                                txt.value +=this.value;
                            }else{
                            if(txt.value.indexOf("+")!=-1||txt.value.indexOf("-")!=-1||txt.value.indexOf("*")!=-1||txt.value.indexOf("/")!=-1){
                            //alert(1);
                            arr[arr.length]=txt.value;
                            txt.value=this.value;
                            }
                        }

                    }

判断是否为数字或者是 . 因为在一个数字里不可能出现多个小数点，比如125.54.1554.所以我们要判断当前显示的屏幕里有没有 . 语句为txt.value.indexOf(“.”)== -1把屏幕上显示的内容，即数字传入到定义好的数组里方便后面运算结果时使用。如果没有 . 则往屏幕上加 . ，如果有则不加。截图如下：
这里写图片描述

if(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/"){
                            if(txt.value.indexOf("+")==-1||txt.value.indexOf("-")==-1||txt.value.indexOf("*")==-1||txt.value.indexOf("/")==-1){
                                arr[arr.length]=txt.value;
                                txt.value=this.value;

                            }
                    }

再判断按钮是否为 + - * /加减乘除运算符。同样因为屏幕上不能同时显示多个运算符所以进行判断，此处为了不显示之前的数字， txt.value=this.value;处不使用 += 把运算符也传入到定义好的数组里方便后面运算结果时使用，结果如图：
这里写图片描述

else if(this.value=="="){
                        arr[arr.length]=txt.value;
                        var str="";
                        for(var a in arr){
                            str+=arr[a];
                        }
                        txt.value=eval(str);
                        //eval(),,专门用来计算表达式标签。
                    }

判断如果按钮是 = 时定义一个空的字符串str，然后把之前存到数组arr里的内容传入到字符串里for(var a in arr){str+=arr[a];} 再用eval（专门用来计算表达式标签）标签将数组里的内容计算，得数传入屏幕显示。结果如图：
这里写图片描述

、

 if(this.value=="C"){
                        txt.value="";
                        arr=[];
                    }else if(this.value=="DEL"){
                        txt.value = txt.value.substr(0, txt.value.length - 1);
                    }

最后判断按钮是否为DEL或者C，DEL实现删除最后一个数字功能，与Backspace相似，C实现清空屏幕上所有的内容，较为简单。

以上是所有的简易计算器代码内容。除了if语句也可以用switch语句 进行判断。但是我个人更喜欢用if。如下为switch例子：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>swith循环</title>
    </head>
    <body>
        <table>
            <tr>
                <td>单价：</td>
                <td><input type="text" id="danjia" value="100" disabled=""/></td>
            </tr>
            <tr>
                <td>数量：</td>
                <td><input type="text" id="num"/></td>
            </tr>
            <tr>
                <td>支付方式：</td>
                <td><select id="choose_pay">
                    <option>QQ支付</option>
                    <option>微信支付</option>
                    <option>支付宝支付</option>
                    <option>银行卡支付</option>
                </select></td>
            </tr>

        </table>
        <button id="btn">
                支付
        </button>

        <script type="text/javascript">
            window.onload=function(){
                var obtn=document.getElementById("btn");



                obtn.onclick=function(){
                var much=document.getElementById("danjia").value;
                var num=document.getElementById("num").value;
                if(isNaN(num)){
                    alert("输入错误");
                }
                var pay=document.getElementById("choose_pay").value;
                var zhekou=0;
                switch(pay){
                    case "QQ支付":zhekou=0.9;break;
                    case "微信支付":zhekou=0.8;break;
                    case "支付宝支付":zhekou=0.85;break;
                    case "银行卡支付":zhekou=0.9;break;
                }
                //alert(num);
                alert("您需要支付:"+much*num*zhekou+"元");
                }
            }
        </script>
    </body>
</html>

结果：
这里写图片描述
当点击选择支付下拉框里支付方式时，可用到switch语句。

switch(pay){
                    case "QQ支付":zhekou=0.9;break;
                    case "微信支付":zhekou=0.8;break;
                    case "支付宝支付":zhekou=0.85;break;
                    case "银行卡支付":zhekou=0.9;break;
                }

当选择QQ支付时，给zhekou变量赋值为0.9，………其他几种支付方式也都有定义好的折扣值。

domunweb

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
用JS语言编写计算机

本周因为要考试，所以博客写的有些迟。上周我们JS没有学习新的内容，对之前学的知识进行了总结复习。喜欢搞事情的我们做出来了一个本人感觉很有趣的东西，简易计算器。下面是代码部分：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>计算机</title> <style type=
复制链接

扫一扫