js-Version zur Realisierung der Rechnerfunktion
|
In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung der Rechnerfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Ich habe diesen einfachen Rechner unter Anleitung des Lehrers fertiggestellt. Es war ein magischer Prozess. Die Grundfunktionen des Rechners sind alle verfügbar. Obwohl es sich um einen einfachen Rechner handelt, erfordert er für Anfänger dennoch ein ausgeprägtes logisches Urteilsvermögen. Es gibt viele Bedingungen. Als Entwickler müssen Sie ständig nach Fehlern im Design suchen und die Benutzeranforderungen ständig verbessern. All dies erfordert klares logisches Denken und Urteilsvermögen. Ich bin ein wenig überfordert.
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<title>Rechner</title>
<Stil>
*{
Polsterung: 0;
Rand: 0;
}
Tisch{
Breite: 400px;
Rand: automatisch;
Rand: 1px, massives Silber;
border-collapse: collapse;/*Abstand zwischen Spalten*/
}
td {
Breite: 100px;
Rand: 1px durchgezogen #525252;
}
td Eingabe{
Breite: 98,7 %;
Höhe: 60px;
Gliederung: keine;
Textausrichtung: rechts;
Schriftgröße: 20px;
Hintergrund: rgba (251, 255, 227, 0,81);
}
td-Taste{
Breite: 100 %;
Höhe: 60px;
Schriftgröße: 22px;
Hintergrund: rgba (223, 255, 243, 0,81);
}
</Stil>
</Kopf>
<Text>
<Tabelle>
<tr>
<td colspan="4" ><input id="text" type="text" value="0" /></td>
</tr>
<tr>
<td colspan="2"><button class="btn">entf</button></td>
<td colspan="2"><button class="btn">c</button></td>
</tr>
<tr>
<td><button class="btn">9</button></td>
<td><button class="btn">8</button></td>
<td><button class="btn">7</button></td>
<td><button class="btn">+</button></td>
</tr>
<tr>
<td><button class="btn">6</button></td>
<td><button class="btn">5</button></td>
<td><button class="btn">4</button></td>
<td><button class="btn">-</button></td>
</tr>
<tr>
<td><button class="btn">3</button></td>
<td><button class="btn">2</button></td>
<td><button class="btn">1</button></td>
<td><button class="btn">*</button></td>
</tr>
<tr>
<td><button class="btn">0</button></td>
<td><button class="btn">.</button></td>
<td><button class="btn">=</button></td>
<td><button class="btn">/</button></td>
</tr>
</Tabelle>
<!--<span id="m">8</span>-->
<Skript>
/* var M = document.getElementById ("m");
console.log(M.innerHTML);
console.log(M.innerText);*/
//Schaltfläche abrufen var buttonal = document.getElementsByClassName ("btn");
var textal = document.getElementById("text");
var res=[]; //Definieren Sie ein Array zum Speichern des Eingabewerts var label=false;
für(var i=0;i<buttonal.length;i++){
Schaltfläche [i].onclick=addclick;
Funktion addclick(){
//Die Eingabe ist eine Zahl oder "."
wenn(!isNaN(this.innerHTML) || this.innerHTML=="."){
//Der Anfangswert des Textfelds ist nicht 0
Bezeichnung = wahr;
wenn(textal.value!== "0"){
//Das Textfeld enthält "."
wenn(textal.value.indexOf(".")!==-1){
// Behandeln Sie das Problem doppelter Punkte. Im Textfeld gibt es einen Punkt, der nicht angeklickt werden kann (die vom Benutzer gedrückte Nummer muss hinzugefügt werden, und der Benutzer drückt einen Punkt, fügt ihn aber nicht hinzu).
//Bei der Eingabe von "."if(this.innerHTML!== "."){
textal.Wert+=dieses.innerHTML;
}
}
anders{
textal.Wert+=dieses.innerHTML;
}
}
//Der Anfangswert des Textfelds ist 0
anders{
wenn(dieses.innerHTML == "."){
textal.value="0"+this.innerHTML;
}
anders{
textal.Wert=dieses.innerHTML;
}
}
}
//Sonst keine Ziffer{
Schalter(dieses.innerHTML) {
Fall "+": speichern (dies);
brechen;
Fall "-": speichern (dies);
brechen;
Fall "/": speichern (dies);
brechen;
Fall "*":speichern(dies);
brechen;
Fall "=":
res.push(textal.wert);
var Ergebnis = eval(res.join(""));
if(Ergebnis == "Unendlich"){
remove_add ("entfernen");
}
textal.value=result==Unendlich?"Der Divisor kann nicht Null sein":result;
//console.log(res.join(""));
res=[];
brechen;
Fall "del":
//Subtrahiere die Zahlen einzeln von hinten nach vorne substr(start,count) substring(start,end) Ende wird nicht genommen textal.value = textal.value.length==1 ? "0":textal.value.substr(0,textal.value.length-1);
brechen;
Fall "c":
textal.value="0";
res=[];
remove_add("hinzufügen");
brechen;
}
}
}
}
Funktion speichern(mini){
//Speichern Sie den vom Benutzer gedrückten Wert, bevor Sie den Bildschirm löschen. //Bestätigen Sie eine Bedingung, ob der Benutzer Symbole kontinuierlich oder Zahlen + Symbole drückt. if(!label) { //Wenn ein Symbol zweimal hintereinander gedrückt wird. res[res.length-1]=mini.innerHTML; //Das zweite gedrückte Symbol ersetzt das erste}
anders{
res.push(textal.wert);
res.push(mini.innerHTML);
}
textal.value="0";
Bezeichnung=falsch;
}
//Alle Ereignisse außer c entladen function remove_add(p){
für(var i=0;i<buttonal.length;i++){
wenn(p == "hinzufügen"){
buttonal[i].onclick = Klick hinzufügen;
}
anders{
wenn(buttonal[i].innerHTML!="c"){
buttonal[i].onclick = null;
}
}
}
}
</Skript>
</body>
</html>Effektbild:
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: MySQL 20-Designprinzipien für Hochleistungsarchitekturen (es lohnt sich, sie zu sammeln)
Artikel empfehlen
Vollständiges Installationstutorial zum Ubuntu 16.04-Image unter VMware
In diesem Artikel finden Sie das Installations-Tu...
Beispiel zum Einrichten eines Linux-Systems zur automatischen Ausführung eines Skripts beim Start
Vorwort Hallo zusammen, ich bin Liang Xu. Bei der...
Implementierungsmethode für den Apache AB-Stresstest zur gleichzeitigen Belastung
ab-Befehlsprinzip Der Befehl ab von Apache simuli...
MySQL Master-Slave-Prinzip und Konfigurationsdetails
MySQL Master-Slave-Konfiguration und Prinzip, zu ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17
Dieser Artikel enthält das grafische Tutorial zur...
So verwenden Sie benutzerdefinierte Bilder in HTML zum Anzeigen von Kontrollkästchen
Wenn Sie zur Implementierung eines Kontrollkästch...
WebWorker kapselt JavaScript-Sandbox-Details
Inhaltsverzeichnis 1. Szenario 2. Implementieren ...
Web 2.0: Ursachen und Lösungen der Informationsüberflutung
<br />Informationsduplikation, Informationsü...
Probleme beim Ändern des Passworts und beim Herstellen einer Verbindung zu Navicat bei der Installation und Verwendung von MySQL 8.0.16 unter Windows 7
Bei der Installation von MySQL sind mir mehrere P...
Analyse der Verwendung und des Prinzips der Docker Swarm-Clusterverwaltung
Schwarmclusterverwaltung Einführung Docker Swarm ...
Vereinfachen Sie die komplexe Website-Navigation
<br />Das Navigationsdesign stellt eine der ...
Problem beim Wechseln der Registerkarten für die Handschrift von React
Übergeordnete Datei importiere React, { useState ...
Vue 2.0 Grundlagen im Detail
Inhaltsverzeichnis 1. Funktionen 2. Beispiele 3. ...
Implementierung der ELK-Bereitstellungsmethode mit einem Klick in Docker Compose
Installieren Filebeat hat Logstash-Forwarder voll...
Das MySQL-Passwort enthält Sonderzeichen und den Anmeldevorgang über die Befehlszeile
Um uns auf dem Server schnell bei der Datenbank a...