Question

早些时候我问过同一个主题，一个简单的计算器，但现在线程有点混乱，不再是最新的了。我希望对此感到恼火，但我发现一个新线程很有用。

我要做一个JavaScript练习，即编写一个计算器脚本，它具有与内置Windows（7）几乎相同的功能。这意味着您有一个字段可以输入一些值，上面的一个小字段显示先前输入的值加上计算操作。

用户向我发送了一些我喜欢的代码，因为它很简单，我试图对其进行调整。

我目前正在努力只使用一个操作，但后来会有其他三个主要操作，平方根等。

到目前为止，一切都运行良好，只有这种情况令人不安，而计算本身却没有。例如：如果输入5 + 5（或任何其他数字），则单击等于，没有任何反应。如果你再次输入任何数字（点击加号前）然后点击等于它会给你一个完全随机的结果，或者你先前计算的结果。

这就是我得到的：

var number = 0;                    //the result
var operation = ' ';               //the chosen calculating operation
var temp_Val = 0;                  //the last entered value (for the subdisplay)

var print_equal = function () {
    var displayVal = document.getElementById("display");        
    displayVal.value = number;                                  
};

var num_add = function () {
    var displayVal = document.getElementById("display");        
    temp_Val = displayVal.value;    //saves the value of the display (for the subdisplay)
    console.log(temp_Val);      //schreibt den Wert des Displays auf die Konsole
    number += parseFloat(displayVal.value);  //calculates the result
    operation = '+';             //saves the used operation (for the subdisplay)
    print_subdisplay();          //runs the function that's building the value of the subdisplay
    displayVal.value = "";               //resets the main display
};

var print_subdisplay = function () {
    var subdisplayVal = document.getElementById("subdisplay");
    subdisplayVal.value = temp_Val + operation;    //creates a String with both the first entered value and the operation
};

HTML：

<!-- Displays -->
        <input type="text" name="display" id="display" value="0" class="display">
        <input type="text" name="subdisplay" id="subdisplay" class="subdisplay" readonly>

<!-- Calculating operations -->
        <input type="button" onclick="print_equal()" id="equal" value="=">
        <input type="button" onclick="num_add()" id="plus" value="+">

<!-- Reset -->
        <input type="button" value="C" onClick="reset()" class="reset">

这是JSFiddle：http://jsfiddle.net/hJfFd/1/

如果你能帮助我，我会觉得非常好，因为我坐在这里试图让这个工作近4个小时（包括研究）。提前谢谢！

Answer 1

代码中存在逻辑错误。如果您按照这一系列步骤操作，它将按预期工作：

1）输入5

2）点击+

3）输入5

3）再次点击+

4）点击=

此时10将出现在＆＃34;输出＆＃34;框。因此，在将结果打印到屏幕之前，print_equal（）函数需要以某种方式执行最终计算，因为最后一个操作（在这种情况下是+操作）没有被执行。

Answer 2

这是一个解决方案，可以帮助您开始实施计算器的其余部分。我建议您再次浏览并添加评论。并了解每行代码的作用。这样做的一个好方法是，如果你对一行代码感到困惑，那么就把它拿出去然后用计算器来玩，你可能会看到为什么添加了这行代码等等。祝你好运！

var number = 0;                                                 //the result
var operation = ' ';                                            //the chosen calculating operation
var temp_Val = 0;                                               //the last entered value (for the subdisplay)

var print_equal = function () {
  var displayVal = document.getElementById("display");
  var subdisplayVal = document.getElementById("subdisplay");
  if(subdisplayVal.value == '')
    return false;
  temp_Val = displayVal.value;
  if(temp_Val == '')
    temp_Val = 0;
  if(operation == '+')
    number += parseFloat(temp_Val);
  subdisplayVal.value = ""; 
  displayVal.value = number;
  temp_Val = 0;
  number = 0;
  operation = ' ';
};

var num_add = function () {
  var displayVal = document.getElementById("display");      
  temp_Val = displayVal.value;
  if(temp_Val == '')
    return false;
  if(operation == '+')
    number += parseFloat(displayVal.value);
  else
    number = parseFloat(displayVal.value);                      
  operation = '+';                                          
  print_subdisplay();                                           
  displayVal.value = "";                                        
};

var print_subdisplay = function () {
  var subdisplayVal = document.getElementById("subdisplay");
  subdisplayVal.value = number + operation;
};

function reset() {
  number = 0;
  operation = ' ';
  var displayVal = document.getElementById("display");
  displayVal.value = "0";
  var subdisplayVal = document.getElementById("subdisplay");
  subdisplayVal.value = ""; 
}

http://jsfiddle.net/CpvqR/21/

Answer 3

您当前的实施有两个简单的问题。

1）您需要确保解析从displayVal读取的所有输入。如果不这样做，您将把字符串存储在您认为是整数的变量中（因为JavaScript是松散类型的）。将您分配到temp_Val的行替换为

temp_Val = parseFloat(displayVal.value);

2）您的=按钮需要进行实际的数学运算（或者至少这是大多数计算器的工作方式）。用

替换print_equal函数的第二行

displayVal.value = parseFloat(displayVal.value) + temp_Val;

显然，还有其他事情你需要担心（比如使用正确的操作），但这至少应该让你去。

Answer 4

前一天我在js css3和html5

中写了一个非常简单的计算

示例

http://jsfiddle.net/trjsJ/

JS

function calc(e){
 var a=e.target.innerText,b=this.firstChild;
 b.value=a=='='?eval(b.value):a=='C'?'':b.value+a;
}
var gui=document.createElement('div');
gui.className='clc';
gui.innerHTML='<input><div>'+('789+456-123*C0./='.split('').join('</div><div>'))+'</div>';
gui.addEventListener('click',calc,false);

window.onload=function(){
 document.body.appendChild(gui);
}

CSS3

body,html{
 height:100%;
 margin:0;
 padding:0;
 background-color:#666;
}
*{
 box-sizing:border-box;
}
.clc{
 width:256px;
 height:320px;
 clear:both;
}
.clc>*{
 border:4px solid #666;
 border-radius:4px;
 font:normal normal bold 20px/56px Arial,Helvetica,sans-serif;
 border-radius:10px;
}
.clc>input{
 width:100%;
 height:20%;
 text-align:right;
 padding:0 20px;
}
.clc>div{
 width:25%;
 height:20%;
 background-color:#5a5a5a;
 color:#fff;
 text-align:center;
 float:left;
}
.clc>div:nth-child(4n+1){
 background-color:#f36573;
}
.clc>div:nth-last-child(1){
 width:100%;
 background-color:#ffb343;
}

简单计算器计算错误

4 个答案: