为javascript计算器创建清晰的按钮代码

时间:2013-02-21 22:07:50

标签: javascript html calculator

我有一项任务,我必须使用java脚本和HTML创建计算器。我编码足够,当我使用运算符时,它会进行数学计算,但数字不会显示在显示框中。我也不确定如何编码清除按钮和否定按钮。 这是外部javascript文件。

    var mycalc = new calc(null,null,null);
    function calc(firstNum,secNum,operator)
    {
this.firstNum = firstNum;
this.secNum = secNum;
this.operator = operator;
}
function numberClick(ref)
{
//alert.ref.value
if(mycalc.firstNum == null)
    mycalc.firstNum = ref.value
else if (mycalc.secNum == null)
    mycalc.secNum = ref.value //ref.value is the value from the input
//alert("firstNum" + mycalc.operator.firstNum);
//alert("secNum") + mycalc.secNum);
}
function operatorClick(ref)
{
if (mycalc.operator == null)
    mycalc.operator = ref.value;
}
function calculateResultClick()
{
if (mycalc.operator == "+")
{
    var ans = parseInt(mycalc.firstNum) + parseInt(mycalc.secNum);
    alert(ans);
}   
if (mycalc.operator == "-")
{
    var ans2 = parseInt(mycalc.firstNum) - parseInt(mycalc.secNum);
    alert(ans2);
}   
if (mycalc.operator == "*")
{   
    var ans3 = parseInt(mycalc.firstNum) * parseInt(mycalc.secNum);
    alert(ans3)
}
if (mycalc.operator == "/")
{
    var ans4 = parseInt(mycalc.firstNum) / parseInt(mycalc.secNum);
    alert(ans4)
}
    }
     function Clear()
    {

    }

2 个答案:

答案 0 :(得分:0)

求反:

if(parseInt(mycalc.firstNum)>0){
    answer=(mycalc.firstNum-mycalc.firstNum*2)
}
if(parseInt(mycalc.firstNum)<0){
    answer=(mycalc.firstNum+mycalc.firstNum*2)
}

清除

mycalc.firstNum=0;

答案 1 :(得分:0)

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">

        function Add() {
            var x, y, txtResult;
            x = document.getElementById('txtFirst').value;
            y = document.getElementById('txtSecond').value;
            if (x == " " || y == "") {
                alert("Please enter FirstValue and SecondValue");
            }
           else{
            var txtResult = +x + +y;
            document.getElementById('txtResult').innerHTML = "Result: " + txtResult;
            }
        }

        function Sub() {
            var x, y, txtResult;
            x = document.getElementById('txtFirst').value;
            y = document.getElementById('txtSecond').value;
            if (x == " " || y == "") {
                alert("Please enter FirstValue and SecondValue");
            } else {
                var txtResult = +x - +y;
                document.getElementById('txtResult').innerHTML = "Result: " + txtResult;
            }
        }
        function Mul() {
            var x, y, txtResult;
            x = document.getElementById('txtFirst').value;
            y = document.getElementById('txtSecond').value;
            if (x == " " || y == "") {
                alert("Please enter FirstValue and SecondValue");
            } else {
                var txtResult = +x * +y;
                document.getElementById('txtResult').innerHTML = "Result: " + txtResult;
            }
        }

        function Div() {
            var x, y, txtResult;
            x = document.getElementById('txtFirst').value;
            y = document.getElementById('txtSecond').value;
             if (x == " " || y == "") {
                alert("Please enter FirstValue and SecondValue");
                 } 
            else if (y != 0) {
                var txtResult = +x / +y;
                  } 
            else {
                alert("Second Number Should not be Zero");
                    }
            document.getElementById('txtResult').innerHTML = "Result: " + txtResult;
          }

        function Clear() {
            document.getElementById('txtFirst').value = "";
            document.getElementById('txtSecond').value = "";
            document.getElementById('txtResult').value = "";

        }


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <label> FirstNumber :</label><br />
        <input id="txtFirst" type="text" /><br />
        <label> Second Number :</label><br />
        <input id="txtSecond" type="text" /><br />
        <label id="txtResult"></label><br />
        <input id="btnAdd" type="button" value="ADD" onclick="Add()"/>
        <input id="btnSub" type="button" value="SUB"  onclick="Sub()"/><br />
        <input id="btnMul" type="button" value="MUL" onclick="Mul()"/>
        <input id="btnDiv" type="button" value="DIV" onclick="Div()"/>
       <input id="btnClear" type="button" value="Clear" onclick="Clear()"/>


    </div>
    </form>
</body>
</html>

enter image description here