二两橙子的前端之路--用js实现简单计算器功能

最新推荐文章于 2022-07-02 23:58:02 发布

Amorcy

最新推荐文章于 2022-07-02 23:58:02 发布

阅读量598

点赞数 1

本文链接：https://blog.csdn.net/Amorcy/article/details/52351431

版权

本文将通过JavaScript来实现计算器简单的加减乘除运算。

~~首先我们大概要知道简单计算器的构建，如下图：

*从上图看出我们需要三个文本框，一个表单控件和一个按钮。下面我们实现这个简单计算器：

 <script type="text/javascript">
        function count(){
            var a;
            var txt1=document.getElementById("txt1").value;
            if(txt1 == ""){
                alert("请输入第一个数字");
                return;
            }
            if (isNaN(txt1)){
                alert("请输入数字！！")
            }
            var txt2=document.getElementById("txt2").value;
            if (txt2 == ""){
                alert("请输入第二个数字");
                return;
            }
            if (isNaN(txt2)){
                alert("请输入数字！！")
            }
            var select=document.getElementById("select").value;
            var result=document.getElementById("fruit").value;
            switch(select){
                case "+":
                    a = parseFloat(txt1) + parseFloat(txt2);
                    break;
                case "-":
                    a = parseFloat(txt1) - parseFloat(txt2);
                    break;
                case "*":
                    a = parseFloat(txt1) * parseFloat(txt2);
                    break;
                case "/":
                    a = parseFloat(txt1) / parseFloat(txt2);
                    if(txt2==0) {
                        alert("除数不可为0！");
                        return;
                    }
                a = parseFloat(txt1)/parseFloat(txt2);
            }
            document.getElementById("fruit").value=a;
        }


    </script>
</head>
<body>
<input type='text' id='txt1'/>        <!--第一个文本框-->
<select id='select'>        <!--表单控件-->
    <option value='+'>+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type='text' id='txt2'/>        <!--第二个文本框-->
<input type='button' value=' = ' οnclick="count()"/>        <!--通过 = 按钮来调用创建的函数，得到结果-->
<input type='text' id='fruit' />        <!--得出结果-->