关闭

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

91人阅读 评论(0) 收藏 举报

本文将通过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=' = ' onclick="count()"/>        <!--通过 = 按钮来调用创建的函数,得到结果-->
<input type='text' id='fruit' />        <!--得出结果-->







1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:525次
    • 积分:40
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章存档
    友情链接