二两橙子的前端之路--用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' />        <!--得出结果-->







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

相关文章推荐

Web第三周-Web前端利用Js实现简单计算器功能

Web前端计算器的初步实现。 计算器 var init=""; var lastop=""; var num1=0; var num2=0; var rs...

JS小Demo实战之一个超级简单的计算器功能的实现。

利用Javascript的DOM处理实现的一个小计算器。

使用 js 实现 贷款计算器功能

Insert title here Enter Loan Data:

简单计算器-功能实现

import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; import javax.swing.JFrame; ...
  • jankin6
  • jankin6
  • 2016年11月23日 21:29
  • 228

hdu1237(简单计算器) LinkedList类实现栈和队列功能

LinkedList类的强大,既能看做队列,也能看做栈,很好的体现了队列,栈和集合的关系和区别的例题...

仿实例开发---简单四则计算器功能实现

输入代码:  activity_main.xml

一个能够实现简单功能的计算器

我也是win API的一个菜鸟,也是刚刚接触win API编程,自己练习制作了一个能够实现简单功能的计算器,在制作的过程中还是遇到了很多的问题,在这里和大家分享一下,希望能对初学者带来帮助,当然,也希...

Andorid实现简单计算器功能

我使用的是线性布局,也可以使用表格布局,但是暂时还没有学到 首先来看一下布局格式代码,直接将代码写在activity_main中: ...

JS实现简单计算器

效果如上图: CSS代码: HTML 代码: JS代码:         var sNum1='';//储存         var sOpr='';         var bNee...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:二两橙子的前端之路--用js实现简单计算器功能
举报原因:
原因补充:

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