Guten Tag, Freunde!In diesem Artikel schreiben wir, wie der Name schon sagt, einen einfachen JavaScript-Rechner.Der Wunsch, einen Taschenrechner zu schreiben, kam mir, nachdem ich mir ein Tutorial zum Erstellen eines „einfachen Taschenrechners“ angesehen hatte, das sich als alles andere als einfach herausstellte und wirklich nichts konnte.Unser Rechner ist wirklich einfach (42 Codezeilen, einschließlich Leerzeichen zwischen Blöcken), aber voll funktionsfähig und skalierbar. Diese wunderbare Bibliothek (Math.js)wird für Berechnungen verwendet . Ohne weitere Einführung kommen wir zur Sache.Unser Markup sieht folgendermaßen aus:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.4/math.js"></script>
<div class="calculator">
<output></output>
</div>
Hier verbinden wir die Bibliothek, erstellen einen Container für den Taschenrechner und ein Feld für die Eingabezeichen und das Ergebnis.Wir verbinden Stile:* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: radial-gradient(circle, skyblue, steelblue);
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
width: 320px;
height: 480px;
background: #eee;
border-radius: 5px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px rgba(0, 0, 0, 0.2);
}
output {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 40px;
background: #fff;
margin: 10px auto;
border-radius: 5px;
font-size: 1.4em;
font-weight: bold;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3),
inset -1px -1px 1px rgba(0, 0, 0, 0.3);
}
.keyboard {
height: 440px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
}
button {
margin: 0.5em 1em;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
font-size: 1em;
font-weight: bold;
}
Folgendes haben wir derzeit:
Schaltflächen werden programmgesteuert generiert.Wir gehen zum Drehbuch über.Wir definieren ein Feld für die Ausgabe des Ergebnisses und erstellen einen Container für die Tastatur:const output = document.querySelector('output')
const div = document.createElement('div')
div.classList.add('keyboard')
document.querySelector('.calculator').appendChild(div)
Unsere Linie mit Zeichen sieht folgendermaßen aus:'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='
Konvertieren Sie diese Zeichenfolge in ein Array und erstellen Sie Schaltflächen:
'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='.split(' ')
.map(symbol => {
div.insertAdjacentHTML('beforeend', `<button value="${symbol}">${symbol}</button>`)
})
Wir finden die erstellten Schaltflächen und fügen ihnen einen Klickereignishandler hinzu:document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', function () {
calc(this.value)
})
})
Wir möchten auch Zeichen über die Tastatur eingeben können. Dazu müssen wir den Ereignishandler "Tastendruck" zum Objekt "Dokument" oder "Fenster" hinzufügen und dann unnötige Werte der Eigenschaft "Schlüssel" des Schlüssels herausfiltern, z. B. mithilfe eines regulären Ausdrucks:document.addEventListener('keydown', event => {
if ((event.key).match(/[0-9%\/*\-+\(\)=]|Backspace|Enter/)) calc(event.key)
})
Die Übereinstimmungsmethode spielt in diesem Fall die Rolle eines Filters: Sie erlaubt nicht, ein Argument an die Berechnungsfunktion zu übergeben, das nicht der darin angegebenen Bedingung entspricht.Die Bedingung selbst lautet wie folgt: Wenn der Wert von event.key eines der in eckigen Klammern ([] angegebenen Zeichen ist; eine Zahl von 0 bis 9, Zeichen für Division, Multiplikation, Addition, Subtraktion, Öffnen, Schließen von Klammern oder ein Gleichheitszeichen; Backslash - Escape) oder (| - Änderung) Backspace oder Enter, dann rufen wir calc mit event.key als Parameter auf, sonst tun wir nichts (Shift wird ebenfalls erfolgreich verworfen).Unsere wichtigste (und einzige) Berechnungsfunktion lautet wie folgt (Code sollte von unten nach oben gelesen werden):
function calc(value) {
if (value.match(/=|Enter/)) {
try {
output.textContent = Math.trunc(math.evaluate(output.textContent))
} catch {
let oldValue = output.textContent
let newValue = ' '
output.textContent = newValue
setTimeout(() => {
output.textContent = oldValue
}, 1500)
}
} else if (value === 'C') {
output.textContent = ''
} else if (value.match(/CE|Backspace/)) {
output.textContent = output.textContent.substring(0, output.textContent.length - 1)
} else {
output.textContent += value
}
}
Abschließend ein paar Worte zur deklarierten Skalierbarkeit und vollen Funktionalität.Die Evaluierungsmethode (früher eval) und andere Math.js-Methoden verfügen über sehr gute Funktionen. Basierend auf diesen Funktionen können wir die Funktionalität unseres Rechners leicht erweitern, indem wir ihm neue Zeichen und Operatoren hinzufügen und so die Möglichkeit bieten, mit Gleitkommazahlen zu arbeiten (Anpassen der Anzahl der Dezimalstellen mit dem Schalter und der Methode „toFixed“) usw.Ergebnis:GitHub-
Code .Vielen Dank für Ihre Aufmerksamkeit. Ich hoffe, Sie finden etwas Nützliches für sich. Ich wünsche Ihnen ein schönes Wochenende und viel Spaß beim Codieren.