使用JS写一个计算器

最新推荐文章于 2023-11-05 20:49:23 发布

weixin_30646315

最新推荐文章于 2023-11-05 20:49:23 发布

阅读量5.6k

点赞数 13

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaobeiju/p/10224131.html

版权

先上效果图：
在这里插入图片描述
简单的加减乘除功能还是有的，所以我们就考虑怎么来实现这个功能。
根据预期效果，可以确定页面中的布局要用到table tr td。
所以先放上页面布局,table的边框宽度border，colspan来设置某一行的宽度为4倍一列宽度，显示结果的地方要显示输入的所有值，先用id来区分，给value一个空，来获取其他按钮键入的value值，用name来命名：

<body>
    <table border="1">
        <!--显示结果行-->
        <tr><td colspan="4"><input id="inp1" type="text" value="" name="xianshi"/></td></tr>

        <!--第一行 清除按钮-->
        <tr>
            <td><input type="button" value="Clear" onclick="inputPCB(this)"/></td>

        </tr>
        <!--第二行-->
        <tr>
        	<td><input type="button" value="1" onclick="inputEvent(this)"/></td>
            <td><input type="button" value="2" onclick="inputEvent(this)"/></td>
            <td><input type="button"value="3" onclick="inputEvent(this)"/></td>
            <td><input type="button" value="4" onclick="inputEvent(this)"/></td>
        </tr>
        <!--第三行-->
        <tr>
        	<td><input type="button" value="5" onclick="inputEvent(this)"/></td>
            <td><input type="button" value="6" onclick="inputEvent(this)"/></td>
            <td><input type="button"value="7" onclick="inputEvent(this)"/></td>
            <td><input type="button" value="8" onclick="inputEvent(this)"/></td>
        </tr>   
        <!--第四行-->
        <tr>
        	<td><input type="button" value="9" onclick="inputEvent(this)"/></td>
            <td><input type="button" value="0" onclick="inputEvent(this)"/></td>
            <td><input type="button"value="." onclick="inputEvent(this)"/></td>
            <td><input type="button" value="=" onclick="inputEquel(this)"/></td>
        </tr>
        <!--第五行-->
        <tr>
        	<td><input type="button" value="+" onclick="inputOper(this)"/></td>
            <td><input type="button" value="-" onclick="inputOper(this)"/></td>
            <td><input type="button"value="*" onclick="inputOper(this)"/></td>
            <td><input type="button" value="/" onclick="inputOper(this)"/></td>
        </tr>   

    </table>
</body>

除了清除按钮是晴空所有外，其他1234567890的按钮通用οnclick=inputEvent(this)，来直接键入它的value值，这是唯一的值。运算符±*/通过操作函数inputOper来执行运算命令。

下面是JS内容，JS的各部分功用标注在注释里面：

<script type="text/javascript">

    /* 定义一个Calculator类*/
    function Calculator(){

        this.jisuan=function(num1,num2,oper){
            var res=0;
            switch(oper){
                case "+":
                    res=num1+num2;
                    break;
                case "-":
                    res=num1-num2;
                    break;
                case "*":
                    res=num1*num2;
                    break;
                case "/":
                    res=num1/num2;
                    break;
            }
            return res;
        }
    }
    //创建对象
    var calculator=new Calculator();

    /*定义全局变量*/
    var val=0; //放置输入的值
    var xval=0;//保存转换Number类型的值
    var temp=0; //保存第一次输入的值   
    var oper="";//保存输入的操作符

    /*获取输入数字*/
    function inputEvent(e){

        val=e.value
        var xsval=document.getElementById("inp1");       
        xsval.value+=val; //连续输入数字(String类型)
        //转换Number类型
        xval=parseFloat(xsval.value);

    }

    /*获取第一行的数据*/
    function inputPCB(e){
        //window.alert(e.value);
        var xsval=document.getElementById("inp1");
        if(e.value=="Clear"){
            xsval.value="";
        }
    }

    /*输入操作符*/
    function inputOper(e){

        oper=e.value;
        //window.alert(typeof oper);
        //oper=oper.substr(0);
        if (e.value=="+"){
            var xsval=document.getElementById("inp1");
            //保存上次计算结果，并对字符串进行转换Number类型
            temp=parseFloat(xsval.value);
            //第一次输入的值设置为空
            xsval.value="";                       
        }else if(e.value=="-"){
            var xsval=document.getElementById("inp1");
            temp=parseFloat(xsval.value);
            xsval.value="";
        }else if(e.value=="*"){
            var xsval=document.getElementById("inp1");
            temp=parseFloat(xsval.value);
            xsval.value="";
        }else if(e.value=="/"){
            var xsval=document.getElementById("inp1");
            temp=parseFloat(xsval.value);
            xsval.value="";
        }
    }

    /*计算结果*/
    function inputEquel(e){

        var xsval=document.getElementById("inp1");       
        if(e.value=="="){
            //window.alert(xval);
            //调用对象方法
            xsval.value=calculator.jisuan(temp,xval,oper);
        }
    }
</script>

样式表简单写一下：

<style>
    input{
        width:60px;
    }
    #inp1{
        width:280px;
        text-align:right;
    }
</style>

这就是一个简单的完整的使用原生JS写出来的计算器效果。

转载于:https://www.cnblogs.com/xiaobeiju/p/10224131.html

weixin_30646315

关注

13
点赞
踩
95

收藏

觉得还不错? 一键收藏
0
评论
使用JS写一个计算器

先上效果图：简单的加减乘除功能还是有的，所以我们就考虑怎么来实现这个功能。根据预期效果，可以确定页面中的布局要用到table tr td。所以先放上页面布局,table的边框宽度border，colspan来设置某一行的宽度为4倍一列宽度，显示结果的地方要显示输入的所有值，先用id来区分，给value一个空，来获取其他按钮键入的value值，...
复制链接

扫一扫