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

原创 2016年08月29日 11:20:44

本文将通过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' />        <!--得出结果-->







版权声明:本文为博主原创文章,未经博主允许不得转载。

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

本文将通过JavaScript来实现计算器简单的加减乘除运算。
  • Amorcy
  • Amorcy
  • 2016年08月29日 11:20
  • 221

反射机制传递类_橙子的Delphi技术专区

鉴于某人说Delphi的反射不能传入或传出类,我在此纠正一下这个说法,下面的代码可以证实,类可以传入传出。 由于我已经把D2009的反射单元移去D2007,因此就不用D2009了,所以代码中暂时不考...
  • ilvu999
  • ilvu999
  • 2011年12月26日 07:57
  • 574

二两橙子的前端之路--简单算法的实现

用JavaScript实现1~1000所有质数的输出。
  • Amorcy
  • Amorcy
  • 2016年08月27日 15:17
  • 293

用javascript实现简单计算器

这是一个简单计算器的实现。可以实现简单的加,减,乘,除功能,用户按下“←”按钮,删除当前算术表达式最后一个字符,并更新显示,用户按下“CE”按钮,清除当前算术表达式,如果算术表达式非法,弹出警告框提醒...
  • XHF901
  • XHF901
  • 2016年12月09日 15:49
  • 365

RSA公私钥生成、加解密,支持1024位计算

  • 2017年08月17日 15:38
  • 196KB
  • 下载

如何发布 JSON 项目? --橙子

如何发布 JSON 项目? 这是受某官方人员之命研究的,恩。。很好很强大。。 首先从System32下找到DBXClientDriver120.bpl 然后从CodeGear Sha...
  • yanjinrong
  • yanjinrong
  • 2014年10月19日 13:11
  • 349

二两橙子的前端之路- -创建GitHub远程仓库

今天根据自身经验来介绍一下如何搭建GitHub仓库。 ~首先!!!得有一个GitHub账号,注册教程度娘一大把。 ~本地设置: ~~我们本地Git仓库和GitHub仓库之间的传输是通过SSH加密...
  • Amorcy
  • Amorcy
  • 2016年09月07日 21:56
  • 193

二两橙子的前端之路--利用for循环完成九九乘法口诀

利用for循环完成九九乘法口诀
  • Amorcy
  • Amorcy
  • 2016年09月04日 23:15
  • 237

js实现简单的计算器代码

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 10级PH...
  • mayanling0113
  • mayanling0113
  • 2012年02月20日 20:26
  • 683
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:二两橙子的前端之路--用js实现简单计算器功能
举报原因:
原因补充:

(最多只允许输入30个字)