Question

所以我一直在做一个非常简单的＆＃34;计算器只使用vanilla JavaScript。但是，我不知道为什么它现在正在发挥作用。

这是我的JavaScript和HTML代码：

＆＃13;

(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;

＆＃13;

<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>

＆＃13;

我不确定我所做的是否正确。我几乎是即兴创作，但如果有人知道更简单的方法或正确的计算器工作方式，我真的很感激帮助。

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>

Answer 2

您是否在代码结束时关闭了IIFE？如果没有，请添加

})();

到文件的末尾。

单独的

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

用逗号表示，而不是分号。

此外，未定义查看器。

可能还有其他事情，但这应该是一个开始

Answer 3

删除功能本身
在声明变量之前添加var：等于查看器
使用：var equal = elem（'。equal'）[0];因为您将通过className获得DOM对象的数组，所以需要第一个
使用：var viewer = elem（'。screen'）[0];因为您将通过className获得DOM对象的数组，所以需要第一个
声明var viewer = elem（'。screen'）;
代码“等于”中的两个单词应为“等于”，删除单词末尾的“ s”

工作代码为：

"use strict";
var elem = function(element) {
if (element.charAt(0) === "#") { 
return document.querySelector(element);
}
return document.querySelectorAll(element);
};
// Variables
var screen = elem('.screen');
var  equal = elem('.equal')[0];
var   nums = elem('.num');
var   ops = elem('.operator');
var   theNum = ""; 
var   oldNum = ""; 
var   resultNum; 
var   operator; 
var viewer = elem('.screen')[0];
// 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";
equal.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;
}


equal.onclick = displayNum;

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

香草JavaScript计算器

3 个答案:

截图：

代码：