javascript - 普通 JavaScript 计算器

Question

所以我一直在开发一个仅使用普通 JavaScript 的“非常简单”的计算器。但我不知道为什么它现在起作用了。

这是我的 JavaScript 和 HTML 代码:

(function() {
  "use strict";


  var elem = function(element) {
    if (element.charAt(0) === "#") { 
      return document.querySelector(element); 
    }

    return document.querySelectorAll(element); 
  };

 // Variables
 var screen = elem('.screen'); 
   equal = elem('.equal'); 
   nums = elem('.num');
   ops = elem('.operator');
   theNum = ""; 
   oldNum = ""; 
   resultNum; 
   operator; 
    

  // When: Number is clicked. Get the current number selected
  var setNum = function() {
    if (resultNum) { 
      theNum = this.getAttribute('data-num');
      resultNum = "";
    } else { 
      theNum += this.getAttribute('data-num');
    }

    viewer.innerHTML = theNum; 

  };


  var moveNum = function() {
    oldNum = theNum;
    theNum = "";
    operator = this.getAttribute('data-ops');

    equal.setAttribute('data-result', ''); 
  };


  var displayNum = function() {


    oldNum = parseFloat(oldNum);
    theNum = parseFloat(theNum);


    switch (operator) {
      case "plus":
        resultNum = oldNum + theNum;
        break;

      case "minus":
        resultNum = oldNum - theNum;
        break;

      case "times":
        resultNum = oldNum * theNum;
        break;

      case "divided by":
        resultNum = oldNum / theNum;
        break;


      default:
        resultNum = theNum;
    }


    viewer.innerHTML = resultNum;
    equal.setAttribute("data-result", resultNum);


    oldNum = 0;
    theNum = resultNum;

  };


  var clearAll = function() {
    oldNum = "";
    theNum = "";
    viewer.innerHTML = "0";
    equals.setAttribute("data-result", resultNum);
  };

  for (var i = 0, l = nums.length; i < l; i++) {
    nums[i].onclick = setNum;
  }

  for (var i = 0, l = ops.length; i < l; i++) {
    ops[i].onclick = moveNum;
  }


  equals.onclick = displayNum;


  elem("#clear").onclick = clearAll;

<div id="calculator">

  <div class="top">
    <button id="clear">C</button>
    <div class="screen"></div>

  </div>

  <div class="btns">

    <button class="num" data-num="7">7</button>
    <button class="num" data-num="8">8</button>
    <button class="num" data-num="9">9</button>

    <button class="operator" data-ops="plus">+</button>

    <button class="num" data-num="4">4</button>
    <button class="num" data-num="5">5</button>
    <button class="num" data-num="6">6</button>

    <button class="operator" data-ops="minus">-</button>

    <button class="num" data-num="1">1</button>
    <button class="num" data-num="2">2</button>
    <button class="num" data-num="3">3</button>

    <button class="operator" data-ops="divided by">÷</button>

    <button class="num" data-num="0">0</button>
    <button class="num" data-num=".">.</button>
    <button class="equal" data-result="">=</button>

    <button class="operator" data-ops="times">x</button>

  </div>
</div>

我不确定我所做的是否正确。我一直在即兴创作，但如果有人知道使计算器工作的更简单方法或正确方法，我将非常感谢您的帮助。

Answer 1

早在 2003 年，我就为学校作业编写了一个基本计算器。尽管代码已有 12 多年的历史，但它今天仍然可以在现代浏览器中运行。请随意查看，借用任何您可能觉得有用的代码。

您可以在下面以及 this github repository 中找到完整的代码.

顺便说一下，我的计算器的行为与真实的、物理的老式计算器完全相同......这意味着您需要按下 on/c 按钮在你可以做任何其他事情之前;-)

屏幕截图:

代码:

var on = false, lastprinted = "", currentfunc ="", memory;

function testoverflow() {
    var overflowflag;
    if (memory >= 1000000000000) {
        turn("error");
        overflowflag = true;
    } else
        overflowflag = false;
    return overflowflag;
}

function findmaxlength(location) {
    var maxlength = 12;
    if (location.indexOf("-", 0) != -1) maxlength++;
    if (location.indexOf(".", 0) != -1) maxlength++;
    return maxlength;
}

function showresult(lg, hf) {
    memory = memory.toString();
    memory = parseFloat(memory.substring(0,findmaxlength(memory)));
    document.calculator.display.value = memory;
    lastprinted = lg;
    currentfunc = hf;
}

function turn(onoff) {
    if (onoff == "ce") {
        if (on) {
            document.calculator.display.value="0";
        }
    } else {
        switch (onoff) {
            case "onc":
                document.calculator.display.value="0";
                on = true;
                break;
            case "error":
                document.calculator.display.value = "ERROR";
                break;
            case "off":
                document.calculator.display.value="";
                on = false;
                break;
        } 
        currentfunc = "";
        memory = null;
    }
    lastprinted = "";
}

function number(input) {
    if (on) {
        if ((document.calculator.display.value.length < findmaxlength(document.calculator.display.value)) || (lastprinted != "number")) {
            if (!((document.calculator.display.value == "0") && ((input == "00") || (input == "0")))) {
                if ((lastprinted == "number")&&(document.calculator.display.value != "0")) {
                    document.calculator.display.value += input;
                    lastprinted = "number";
                } else if (input != "00") {
                    document.calculator.display.value = input;
                    lastprinted = "number";
                }
            }
        }
    }
}

function func(symbool) {
    if ((on) && (document.calculator.display.value != "ERROR")) {
        if (memory == null) {
            memory = parseFloat(document.calculator.display.value);
            lastprinted = "func";
            currentfunc = symbool;
        } else if ((document.calculator.display.value == "0") && (currentfunc == "/")) {
            turn("error");
        } else {
            eval("memory = " + memory + currentfunc + "(" + document.calculator.display.value +");");
            if (! testoverflow()) showresult("func", symbool);
        }
    }
}

function result(name) {
    var value;
    if ((on) && (document.calculator.display.value != "ERROR")) {
        if (memory != null) {
            value = document.calculator.display.value;
            if (name == "procent") value = memory * parseFloat(document.calculator.display.value)/ 100; 
            eval("memory = " + memory + currentfunc + "(" + value +");");
            if (! testoverflow()) {
                showresult("name", "");
                memory = null;
            }		
        }
    }
}

function dot() {
    var maxlength = 12;
    if ((on) && (document.calculator.display.value != "ERROR")) {
        if (document.calculator.display.value.indexOf("-", 0) != -1) maxlength++;
        if (((lastprinted == "number") || (document.calculator.display.value="0")) && !(document.calculator.display.value.length >= maxlength) && (document.calculator.display.value.indexOf(".", 0) == -1)) {
            document.calculator.display.value += ".";
            lastprinted = "number";
        }
    }
}

function negative() {
    if ((on) && (lastprinted == "number") && (document.calculator.display.value != "ERROR")) {
        if (document.calculator.display.value.indexOf("-", 0) == -1) document.calculator.display.value = "-" + document.calculator.display.value;
        else document.calculator.display.value = document.calculator.display.value.substring(1,14);
    }
}

body {background-color: #CCCCCC; color: #555555; font-family: Arial; font-weight: bold; font-size: 8pt;}
a {color: #CC5555; text-decoration: none}
a:visited {color: #CC5555; text-decoration: none}
a:active {color: #FF0000; text-decoration: none}
a:hover {color: #FF0000; text-decoration: none}
.button {height: 30px; width: 40px; background-color: #555555; border-color: #555555; color:#FFFFFF;}
.invisbutton {height: 28px; width: 40px; background-color: #7555C6; border-color: #7555C6; border-style:solid;}
.display {height: 50px; width: 217px; background-color: #D6D39F; border-color: #000000; color:#222222; border-style: solid; text-align: right; font-size: 22pt;}
.redbutton {height: 30px; width: 40px; background-color: #EE0000; border-color: #EE0000; color:#FFFFFF;}
.yellowbutton {height: 30px; width: 40px; background-color: #EEEE00; border-color: #EEEE00; color:#000000;}
.device {height: 30px; width: 40px; background-color: #7555C6; border-color: #7555C6; border-style:ridge;}

<table class="device" cellspacing="20" cellpadding="0">
    <tr>
        <td align="center">
            <form name="calculator">
                <table>
                    <tr>
                        <td colspan="5"><input type="text" name="display" class="display" readonly='readonly'></td>
                    </tr>
                    <tr>
                        <td colspan="5"><input type="text" class="invisbutton" style="height:15px;" readonly='readonly'></td>
                    </tr>
                    <tr>
                        <td><input type="text" name="hidden" class="invisbutton" readonly='readonly'></td>
                        <td><input type="text" name="hidden2" class="invisbutton" readonly='readonly'></td>
                        <td><input type="button" name="off" class="redbutton" value="off" onclick="turn(this.name);"></td>
                        <td><input type="button" name="ce" class="yellowbutton" value="ce" onclick="turn(this.name);"></td>
                        <td><input type="button" name="onc" class="yellowbutton" value="on/c" onclick="turn(this.name);"></td>
                    </tr>
                    <tr>
                        <td><input type="button" name="number7" class="button" value="7" onclick="number(this.value);"></td>
                        <td><input type="button" name="number8" class="button" value="8" onclick="number(this.value);"></td>
                        <td><input type="button" name="number9" class="button" value="9" onclick="number(this.value);"></td>
                        <td><input type="button" name="procent" class="button" value="%" onclick="result(this.name);"></td>
                        <td><input type="button" name="plusmin" class="button" value="+/-" onclick="negative();"></td>
                    </tr>
                    <tr>
                        <td><input type="button" name="number4" class="button" value="4" onclick="number(this.value);"></td>
                        <td><input type="button" name="number5" class="button" value="5" onclick="number(this.value);"></td>
                        <td><input type="button" name="number6" class="button" value="6" onclick="number(this.value);"></td>
                        <td><input type="button" name="func-" class="button" value="-" onclick="func(this.name.substring(4, 5));"></td>
                        <td><input type="button" name="func/" class="button" value="/" onclick="func(this.name.substring(4, 5));"></td>
                    </tr>
                    <tr>
                        <td><input type="button" name="number1" class="button" value="1" onclick="number(this.value);"></td>
                        <td><input type="button" name="number2" class="button" value="2" onclick="number(this.value);"></td>
                        <td><input type="button" name="number3" class="button" value="3" onclick="number(this.value);"></td>
                        <td rowspan="2"><input type="button" name="func+" class="button" value="+" style="height: 64px" onclick="func(this.name.substring(4, 5));"></td>
                        <td><input type="button" name="func*" class="button" value="x" onclick="func(this.name.substring(4, 5));"></td>
                    </tr>
                    <tr>
                        <td><input type="button" name="number0" class="button" value="0" onclick="number(this.value);"></td>
                        <td><input type="button" name="number00" class="button" value="00" onclick="number(this.value);"></td>
                        <td><input type="button" name="dot" class="button" value="." onclick="dot();"></td>
                        <td><input type="button" name="equals" class="button" value="=" onclick="result(this.name);"></td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
</table>