Question

我正在使用HTML，CSS和纯JavaScript构建计算器。我试着用很少的信息做到这一点，但我无法理解现在发生了什么。由于一个人输入许多数字（即456）来创建一个数字，然后点击运算符，我决定创建一个数组（arrayInput），它将保存数字4,5,6甚至是字符“。”。所以例如数组中的4.56显示为4，。，5,6所以我删除了字符，然后删除了空格。最后因为它现在是一个字符串“4.56”我使用Number（）函数将其转换为数字。我也使用了parseInt，parseFloat，但它只显示第一次，当选择一个运算符时，它不会计算总数，而是保留总计零。我将非常感谢您的支持。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <style type='text/css'>
    .row{
    height: 2em;
    width: 25%;
    border: 0.05em solid black;
    float:left;
    font-size: 2em;
    font-style: sans-serif;
    text-align:center;
    padding:0;
}
#screen{
    height: 4em;
    width: 100%;
    border: 0.03em solid black;
    float:left;
    font-size: 3em;
    font-style: sans-serif;
    text-align:right;
    margin:0;
    padding:0;

}


  </style>



<script type='text/javascript'>

var total=0;  //which will replace the number1 in parameters
var numberArray=[];
var operator="plus";  //by default i give it an addition
var number=0;
//get digits from buttons to create the number you want to use

var performOperator=function (tot,num,ope){
        if(ope==="plus")
            {
            tot+=num;
            num=0;
            document.getElementById("screen").innerHTML = tot;  //display a number of total HOPEFULLY
            }
        else if(ope==="-")
            {
            tot-=num;
            num=0;
            document.getElementById("screen").innerHTML = tot;  //display a number of total HOPEFULLY
            }

        else if(ope==="multiply")
            {
            tot*=num;
            num=0;
            document.getElementById("screen").innerHTML = tot;  //display a number of total HOPEFULLY
            }
        else if(ope==="/")
            {
            tot/=num;
            num=0;
            document.getElementById("screen").innerHTML = tot;  //display a number of total HOPEFULLY
            }
        else if(ope==="equal")
            {
            document.getElementById("screen").innerHTML = tot;  //display a number of last total HOPEFULLY
            num=0;
            }
        else if(ope==="clear")
            {
            tot=0;
            num=0;
            document.getElementById("screen").innerHTML = tot;  //display a number of total HOPEFULLY
            }
    }


function getDigit(elemId){


    var digitEntry=document.getElementById(elemId).value; //digit value goes to "val"
    numberArray.push(digitEntry); //each val should go to push into an array
    var numberWithSpace=numberArray.join(' '); //convert the array into a string block with spaces
    var numberNoSpace=numberWithSpace.replace(/\s/g, '');  //string number with no space
    number=Number(numberNoSpace);// it should be converter into a number here but does not look like..
    document.getElementById("screen").innerHTML = number;  //probably displays array of Number as STRING 

}

function highlightSign(elemId){

    var sign=document.getElementById(elemId).value; //digit value goes to "sign""
    operator=sign;
    performOperator(total,number,operator); //Call the performOperator function and creates new total and new number 0
    numberArray=[]; //once the number is created as real number then the array used to built it clears
}



</script>


</head>
<body>
  <body>

    <p id="screen"></p>

    <button id="nC" class="row" value=""></button>
    <button id="pmSign" class="row" value=""></button>
    <button id="nPercentage" class="row" value=""></button>
    <button id="divide" class="row" value="/" onclick="highlightSign(this.id)">/</button>
    <button id="n7" class="row" value=7 onclick="getDigit(this.id)">7</button>
    <button id="n8" class="row" value=8 onclick="getDigit(this.id)">8</button>
    <button id="n9" class="row" value=9 onclick="getDigit(this.id)">9</button>
    <button id="opX" class="row" value="multiply" onclick="highlightSign(this.id)">x</button>
    <button id="n4" class="row" value=4 onclick="getDigit(this.id)">4</button>
    <button id="n5" class="row" value=5 onclick="getDigit(this.id)">5</button>
    <button id="n6" class="row" value=6 onclick="getDigit(this.id)">6</button>
    <button id="minus" class="row" value="-" onclick="highlightSign(this.id)">-</button>
    <button id="n1" class="row" value=1 onclick="getDigit(this.id)">1</button>
    <button id="n2" class="row" value=2 onclick="getDigit(this.id)">2</button>
    <button id="n3" class="row" value=3 onclick="getDigit(this.id)">3</button>
    <button id="plus" class="row" value="plus" onclick="highlightSign(this.id)">+</button>
    <button id="n0" class="row" value=0 onclick="getDigit(this.id)">0</button>
    <button id="clear" class="row" value="clear" onclick="highlightSign(this.id)">clear</button>
    <button id="decPoint" class="row" value="." onclick="getDigit(this.id)">.</button>
    <button id="equal" class="row" value="equal" onclick="highlightSign(this.id)">=</button>
</body>

</body>


</html>

Answer 1

我在这里完成了你的全部工作。但是你需要改变计算器的逻辑。那里有很多改变

http://jsfiddle.net/g6gj1kr6/9/

不要将你的总数作为参数传递，只需将其设为全局，然后就可以重写它。

var tot=0;

无论如何，你的计算器还有很多工作要做

转换为字符串的数组用于转换为数字但不起作用

1 个答案: