Ein einfacher HTML / JavaScript-Rechner

68427
user3583688

Ich mache eine App und möchte, dass jemand meinen Code überprüft, um ihn möglicherweise kürzer zu machen, Fehler zu beheben oder einige Dinge hinzuzufügen.

<!DOCTYPE html>
<html>
    <head>
    <title>Simple Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
input[type="button"]{
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #606060), color-stop(1, #606060) );
    background:-moz-linear-gradient( center top, #606060 5%, #606060 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#606060', endColorstr='#606060');
    background-color:#606060;
    border:1px solid #606060;
    display:inline-block;
    color:#fff;
    font-family:Arial;
    font-size:50px;
    line-height:28px;
    text-decoration:none;
    text-align:center;
    margin-bottom:1.5px;
    margin-left: 1.5px;
    margin-right:1.5px ;
    margin-top:1.5px ;
    height: 75px; 
}
input[type="button"]{
  width: 184px;
}
#btnC{
        width:372.7px;
}
#btn0{
        width:374.7px;
}
#btn0,#btndecimal,#btndivide {
    margin-right: 0.1px;
}
#btn7,#btn4,#btn1,#btn0,#btnequals {
    margin-left: 0.01px;
}        
#btnequals {
    height: 61px;
    width: 944px;
    margin-top: 3px;
}
       input[type="button"]:active {
           position:relative;
            background:#989898;
} 
        input:focus {
            outline:0;
        }
   input[type="Text"] {
       padding-left: 10px;
       margin-bottom: 1.5px;
            font-size: 100px;
            background-color: #202020 ;n
            height:195px;
            width: 935px;
            border:none;
       color:white;
        }
        body {
            background-color: #080808 ;
            overflow: hidden;
        }
        #about {
        font-size: 45px;
        }
    </style>
</head>
<body>
    <FORM name="Keypad" action="">
<input name="ReadOut" id="output" type="Text" size=24 value="0" readonly>
    <table>
<tr>
  <td><input id="btn7" type="Button" value="  7  " onclick="NumPressed(7)"></td>
  <td><input id="btn8" type="Button" value="  8  " onclick="NumPressed(8)"></td>        
  <td><input id="btn9" type="Button" value="  9  " onclick="NumPressed(9)"></td>
<td colspan="2"><input id="btnC" type="Button" value="  C  " onclick="Clear()"></td>
</tr>
<tr>
  <td><input id="btn4" type="Button" value="  4" onclick="NumPressed(4)"></td>
  <td><input id="btn5" type="Button" value="  5   "onclick="NumPressed(5)"></td>        
  <td><input id="btn6" type="Button" value="  6  " onclick="NumPressed(6)"></td>
<td><input id="btnplusminus" type="Button" value=" +/- " onclick="Neg()"></td>
<td><input id="btnplus" type="Button" value="  +  " onclick="Operation('+')"></td>
</tr>
<tr>
  <td><input id="btn1" type="Button" value="  1  " onclick="NumPressed(1)"></td>
  <td><input id="btn2" type="Button" value="  2  " onclick="NumPressed(2)"></td>        
  <td><input id="btn3" type="Button" value="  3  " onclick="NumPressed(3)"></td>
<td><input id="btnmultiply" type="Button" value="  *  " onclick="Operation('*')"></td>
<td><input id="btnminus" type="Button" value="   -   " onclick="Operation('-')"></td>
</tr>
</table>
<input id="btn0" type="Button" value="  0  " onclick="NumPressed(0)">
  <input id="btndecimal" type="Button" value="   .  " onclick="Decimal()">      
<input id="btndivide" type="Button" value="   /   " onclick="Operation('/')">
<input id="about" type="Button" value="About" onclick="myFunction()"></br>
<input id="btnequals" type="Button" value="  =  " onclick="Operation('=')">
 </FORM>
<script>
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value  = Num;
FlagNewNum = false;
   }
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
   }
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accumulate += parseFloat(Readout);
else if ( '-' == PendingOp )
Accumulate -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accumulate /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accumulate *= parseFloat(Readout);
else
Accumulate = parseFloat(Readout);
FKeyPad.ReadOut.value = Accumulate;
PendingOp = Op;
   }
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
   }
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
   }
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accumulate = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accumulate);
}
</script>
<script>
function myFunction() {
    alert("TegTech 2014");
}
</script>
</body>
</html>
Antworten
8

4 Antworten auf die Frage

6
200_success

Sie haben einige Layout-Fehler:

  • Die Beschriftungen für die Tasten "4" und "5" sind aufgrund einer nachlässigen Verwendung von Leerzeichen falsch ausgerichtet. Ich empfehle, die Leerzeichen ganz wegzulassen, zB:

    <input id="btn7" type="Button" value="7" …
    
  • Sie haben a <table>für die ersten drei Reihen von Schaltflächen verwendet, nicht jedoch für die letzten zwei. Daher werden die letzten beiden Zeilen in einigen Browsern möglicherweise um einige Pixel falsch ausgerichtet. Auch das Reflow-Verhalten bei zu schmalem Fenster ist inkonsistent.

Rechner-Screenshot mit kommentierten Layoutproblemen

Ich weiß nicht, warum jemand Leerzeichen verwendet, wenn der Text mit anderen Werkzeugen ausgerichtet wird phuclv vor 6 Jahren 0
4
Malachi

Formatierung

Sie müssen Ihren Code wirklich richtig formatieren, er sieht schrecklich aus.

So sollte es aussehen

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Calculator</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            input[type="button"]{
                background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #606060), color-stop(1, #606060) );
                background:-moz-linear-gradient( center top, #606060 5%, #606060 100% );
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#606060', endColorstr='#606060');
                background-color:#606060;
                border:1px solid #606060;
                display:inline-block;
                color:#fff;
                font-family:Arial;
                font-size:50px;
                line-height:28px;
                text-decoration:none;
                text-align:center;
                margin-bottom:1.5px;
                margin-left: 1.5px;
                margin-right:1.5px ;
                margin-top:1.5px ;
                height: 75px; 
            }
            input[type="button"]{
            width: 184px;
            }
            #btnC{
                    width:372.7px;
            }
            #btn0{
                    width:374.7px;
            }
            #btn0,#btndecimal,#btndivide {
                margin-right: 0.1px;
            }
            #btn7,#btn4,#btn1,#btn0,#btnequals {
                margin-left: 0.01px;
            }        
            #btnequals {
                height: 61px;
                width: 944px;
                margin-top: 3px;
            }
            input[type="button"]:active {
                position:relative;
                background:#989898;
            } 
            input:focus {
                outline:0;
            }
            input[type="Text"] {
                padding-left: 10px;
                margin-bottom: 1.5px;
                font-size: 100px;
                background-color: #202020 ;n
                height:195px;
                width: 935px;
                border:none;
                color:white;
            }
            body {
                background-color: #080808 ;
                overflow: hidden;
            }
            #about {
                font-size: 45px;
            }
        </style>
    </head>
    <body>
        <FORM name="Keypad" action="">
            <input name="ReadOut" id="output" type="Text" size=24 value="0" readonly>
            <table>
                <tr>
                    <td><input id="btn7" type="Button" value="  7  " onclick="NumPressed(7)"></td>
                    <td><input id="btn8" type="Button" value="  8  " onclick="NumPressed(8)"></td>        
                    <td><input id="btn9" type="Button" value="  9  " onclick="NumPressed(9)"></td>
                    <td colspan="2"><input id="btnC" type="Button" value="  C  " onclick="Clear()"></td>
                </tr>
                <tr>
                    <td><input id="btn4" type="Button" value="  4" onclick="NumPressed(4)"></td>
                    <td><input id="btn5" type="Button" value="  5   "onclick="NumPressed(5)"></td>        
                    <td><input id="btn6" type="Button" value="  6  " onclick="NumPressed(6)"></td>
                    <td><input id="btnplusminus" type="Button" value=" +/- " onclick="Neg()"></td>
                    <td><input id="btnplus" type="Button" value="  +  " onclick="Operation('+')"></td>
                </tr>
                <tr>
                    <td><input id="btn1" type="Button" value="  1  " onclick="NumPressed(1)"></td>
                    <td><input id="btn2" type="Button" value="  2  " onclick="NumPressed(2)"></td>        
                    <td><input id="btn3" type="Button" value="  3  " onclick="NumPressed(3)"></td>
                    <td><input id="btnmultiply" type="Button" value="  *  " onclick="Operation('*')"></td>
                    <td><input id="btnminus" type="Button" value="   -   " onclick="Operation('-')"></td>
                </tr>
            </table>
            <input id="btn0" type="Button" value="  0  " onclick="NumPressed(0)">
            <input id="btndecimal" type="Button" value="   .  " onclick="Decimal()">      
            <input id="btndivide" type="Button" value="   /   " onclick="Operation('/')">
            <input id="about" type="Button" value="About" onclick="myFunction()"></br>
            <input id="btnequals" type="Button" value="  =  " onclick="Operation('=')">
        </FORM>
        <script>
            var FKeyPad = document.Keypad;
            var Accumulate = 0;
            var FlagNewNum = false;
            var PendingOp = "";
            function NumPressed (Num) {
                if (FlagNewNum) {
                    FKeyPad.ReadOut.value  = Num;
                    FlagNewNum = false;
                }
                else {
                    if (FKeyPad.ReadOut.value == "0")
                        FKeyPad.ReadOut.value = Num;
                    else
                        FKeyPad.ReadOut.value += Num;
                }
            }
            function Operation (Op) {
                var Readout = FKeyPad.ReadOut.value;
                if (FlagNewNum && PendingOp != "=");
                else
                {
                    FlagNewNum = true;
                    if ( '+' == PendingOp )
                        Accumulate += parseFloat(Readout);
                    else if ( '-' == PendingOp )
                        Accumulate -= parseFloat(Readout);
                    else if ( '/' == PendingOp )
                        Accumulate /= parseFloat(Readout);
                    else if ( '*' == PendingOp )
                        Accumulate *= parseFloat(Readout);
                    else
                        Accumulate = parseFloat(Readout);
                    FKeyPad.ReadOut.value = Accumulate;
                    PendingOp = Op;
                }
            }
            function Decimal () {
                var curReadOut = FKeyPad.ReadOut.value;
                if (FlagNewNum) {
                    curReadOut = "0.";
                    FlagNewNum = false;
                }
                else
                {
                    if (curReadOut.indexOf(".") == -1)
                        curReadOut += ".";
                }
                FKeyPad.ReadOut.value = curReadOut;
            }
            function ClearEntry () {
                FKeyPad.ReadOut.value = "0";
                FlagNewNum = true;
            }
            function Clear () {
                Accumulate = 0;
                PendingOp = "";
                ClearEntry();
            }
            function Neg () {
                FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
            }
            function Percent () {
                FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accumulate);
            }
        </script>
        <script>
            function myFunction() {
                alert("TegTech 2014");
            }
        </script>
    </body>
</html>

Während ich Ihren Code umformatierte, fand ich einen Code, bei dem ich nicht sicher war, ob er sich innerhalb des if-Blocks befinden sollte oder nicht, da Sie den if-Block one linedohne Klammern hatten.

dieses bisschen Code hier

function Operation (Op) {
    var Readout = FKeyPad.ReadOut.value;
    if (FlagNewNum && PendingOp != "=");
    else
    {
        FlagNewNum = true;
        if ( '+' == PendingOp )
            Accumulate += parseFloat(Readout);
        else if ( '-' == PendingOp )
            Accumulate -= parseFloat(Readout);
        else if ( '/' == PendingOp )
            Accumulate /= parseFloat(Readout);
        else if ( '*' == PendingOp )
            Accumulate *= parseFloat(Readout);
        else
            Accumulate = parseFloat(Readout);
        FKeyPad.ReadOut.value = Accumulate;
        PendingOp = Op;
    }
}

sollen diese innerhalb des vorherigen elseBlocks sein?

 FKeyPad.ReadOut.value = Accumulate;
 PendingOp = Op;

Code in Dateien trennen

Sie haben reichlich CSS und Javascript, erstellen ein Stylesheet und eine Javascript-Datei und importieren sie dann in das headTag der HTML-Datei.

Wenn Sie den gesamten Code in die HTML-Datei einfügen, ist die Datei unübersichtlich und schwierig zu pflegen. Erstellen Sie daher jeweils separate Dateien und verknüpfen Sie sie im headTag Ihrer HTML-Datei.

2
Tiberiu C.

HTML:


Update:

Ich habe mich bei diesem One geirrt - stackoverflow.com/a/3558200/567864

Obwohl HTML ein zulässiges Markup ist, schließen Sie alle Tags. Einige Browser können in den Quirks-Modus wechseln, was die Verarbeitung für den Browser erschwert.

Anstatt :

<input id="btn7" type="Button" value="  7  " onclick="NumPressed(7)">

Benutzen :

<input id="btn7" type="Button" value="  7  " onclick="NumPressed(7)" />


Table sollte nicht für das Layout verwendet werden, sie sind schwer zu pflegen und zu gestalten, verwenden Sie stattdessen div.

Semantisch gesehen ist das Table-Tag für die Auflistung von Tabellendaten gedacht. Es ist nicht für die Erstellung von Strukturen optimiert.


Behalten Sie den gleichen Benennungsstil bei:

  • Hier haben Sie den Tag-Namen in Großbuchstaben geschrieben: <FORM name="Keypad" action="">

  • Hier machen Sie typeWert:<td><input id="btn1" type="Button" value=" 1 " onclick="NumPressed(1)"></td>

  • Hier hast du Kamel verwendet: <td colspan="2"><input id="btnC" type="Button" value=" C "onclick="Clear()"></td>

  • Aber hier hast du nicht für die Id: <input id="btnequals" type="Button" value=" = " onclick="Operation('=')">


Überprüfen Sie die Richtigkeit unter http://validator.w3.org/#validate_by_input

CSS:


Falsche Syntax:

Hintergrundfarbe: # 202020; n

Das war nam Ende beabsichtigt? sieht für mich nicht gültig aus.


Ihr Farbverlauf input[type="button"]sieht komisch aus ... gleiche Farbe am Anfang und am Ende, wobei der Hintergrund dieselbe Farbe hat. Das ist überhaupt kein Gradient.


Sie haben dieselbe Deklaration zweimal verwendet:

input[type="button"]{

Namensraum für Ihren Stil - Wenn Sie dies zu einer größeren Seite hinzufügen möchten, kann Ihr Stil mehr Auswirkungen haben, als Sie beabsichtigten.

JavaScript:


Sie sollten kein leeres if verwenden, um es einfach umzukehren.

if (FlagNewNum && PendingOp != "="); 
else
{

Ihre Funktionen sind bedeutungslos, wenn sie auseinandergenommen werden. Sie sollten sie in einem Namespace, Objekt oder Modell zusammenfassen. Auch das Vorhandensein eines globalen Bereichs kann innerhalb einer größeren Seite nicht gut sein.


Verwenden Sie eine Standardbenennungskonvention: http://en.wikipedia.org/wiki/Naming_convention_%28programming%29 reduzieren den Aufwand für das Lesen und Verstehen von Quellcode durch Dritte und verbessern die Darstellung des Quellcodes.

Benutzererfahrung:


Bei Rechnern kann man erwarten, dass Werte auch über die Tastatur eingegeben werden können und nicht nur mit der Maus.

`input` ist kein gepaartes Tag, das geschlossen werden muss. Auch ``in HTML 5 ist nur ein langer Weg zu sagen``. Nur XHTML verwendet es als nahes Tag. http://stackoverflow.com/a/3558200/567864 Corbin vor 6 Jahren 2
Darüber hinaus sollte XHTML `verwenden`mit einem Leerzeichen, nicht mit``(wie in dieser Antwort), um HTML-kompatibel zu bleiben (das" / "kann als ein Attribut ohne Wert analysiert werden). ``ist nur XML, nicht XHTML und schon gar nicht HTML. Dagg vor 6 Jahren 0
@ Corbin Yeah :) ... Sieht aus wie ich bin ein XML-Süchtiger. Tiberiu C. vor 6 Jahren 0
@Dagg Danke für den Hinweis, ich habe es falsch geschrieben. Tiberiu C. vor 6 Jahren 0
0
krankuba

Hier ist meine Lösung:

var number = "",
  total = 0,
  regexp = /[0-9]/,
  mainScreen = document.getElementById("mainScreen");

function InputSymbol(num) {
  var cur = document.getElementById(num).value;
  var prev = number.slice(-1);
  // Do not allow 2 math operators in row
  if (!regexp.test(prev) && !regexp.test(cur)) {
    console.log("Two math operators not allowed after each other ;)");
    return;
  }
  number = number.concat(cur);
  mainScreen.innerHTML = number;
}

function CalculateTotal() {
  // Time for some EVAL magic
  total = (Math.round(eval(number) * 100) / 100);
  mainScreen.innerHTML = total;
}

function DeleteLastSymbol() {
  if (number) {
    number = number.slice(0, -1);
    mainScreen.innerHTML = number;
  }
  if (number.length === 0) {
    mainScreen.innerHTML = "0";
  }
}

function ClearScreen() {
  number = "";
  mainScreen.innerHTML = 0;
}
body, div, header, h1, p, table, tr, td {
    margin: 0px;
    padding: 0px;
}

header {
    letter-spacing: 6px;
    font-size: 14px;
}

table {
    width: 100%;
}

button {
    width: 100%;
    height: 50px;
    font-size: 18px;
}

.container {
    margin-top: 100px;
    margin-left: 100px;
    padding: 10px;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    max-width: 400px;
    background-color: silver;
    border: 1px solid black;
    border-radius: 5px;
}

.screen {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #2d2929;
    color: white;
    text-align: right;
    font-family: 'Prompt', sans-serif;
}
<html>

<body>
  <div class="container">
    <header>JAVASCRIPT CALCULATOR</header>
    <div class="screen">
      <h1 id="mainScreen">0</h1>
    </div>
    <table>
      <tr>
        <td><button value="7" id="7" onclick="InputSymbol(7)">7</button></td>
        <td><button value="8" id="8" onclick="InputSymbol(8)">8</button></td>
        <td><button value="9" id="9" onclick="InputSymbol(9)">9</button></td>
        <td><button onclick="DeleteLastSymbol()">c</button></td>
      </tr>
      <tr>
        <td><button value="4" id="4" onclick="InputSymbol(4)">4</button></td>
        <td><button value="5" id="5" onclick="InputSymbol(5)">5</button></td>
        <td><button value="6" id="6" onclick="InputSymbol(6)">6</button></td>
        <td><button value="/" id="104" onclick="InputSymbol(104)">/</button></td>
      </tr>
      <tr>
        <td><button value="1" id="1" onclick="InputSymbol(1)">1</button></td>
        <td><button value="2" id="2" onclick="InputSymbol(2)">2</button></td>
        <td><button value="3" id="3" onclick="InputSymbol(3)">3</button></td>
        <td><button value="*" id="103" onclick="InputSymbol(103)">*</button></td>
      </tr>
      <tr>
        <td colspan="2"><button value="0" id="0" onclick="InputSymbol(0)">0</button></td>
        <td><button value="-" id="102" onclick="InputSymbol(102)">-</button></td>
        <td><button value="+" id="101" onclick="InputSymbol(101)">+</button></td>
      </tr>
      <tr>
        <td colspan="2"><button onclick="ClearScreen()">clear</button></td>
        <td colspan="2"><button onclick="CalculateTotal()">=</button></td>
      </tr>
    </table>
  </div>
</body>

</html>