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
Detaillierte Erklärung der Verwendung von 5 verschiedenen Werten der CSS-Position
Die Position-Eigenschaft Die Positionseigenschaft...
Durch die Anpassung des mobilen Endgeräts wird px automatisch in rem umgewandelt
Installieren Sie zuerst postcss-pxtorem: npm inst...
Teilen Sie die Fallstricke von MySQLs current_timestamp und ihre Lösungen
Inhaltsverzeichnis MySQLs current_timestamp-Falle...
Detaillierte Schritte zum Ändern gespeicherter MySQL-Prozeduren
Vorwort Bei der tatsächlichen Entwicklung werden ...
Konfigurieren Sie ein Implementierungsbeispiel für den Mysql-Master-Slave-Dienst
Konfigurieren Sie ein Implementierungsbeispiel fü...
Docker-Konfiguration Alibaba Cloud Container Service-Betrieb
Konfigurieren des Alibaba Cloud Docker Container ...
MySQL 8.0.19 WinX64-Installations-Tutorial und Ändern des Initialpassworts unter Windows 10
In diesem Artikel finden Sie das Installations-Tu...
Detaillierte Erläuterung der Idee, mit CSS-Animation den Punkteeffekt zu erzielen
Im aktuellen Projekt müssen wir einen Effekt zum ...
Dieser Artikel zeigt Ihnen, wie die Speicherbereinigung in JavaScript funktioniert
Inhaltsverzeichnis 1. Übersicht 2. Speicherverwal...
Detaillierte Erläuterung des Implementierungsprinzips von MySQL-Transaktionen und Spring-Isolationsebenen
1. Transaktionen haben ACID-Eigenschaften Atomari...
So bringen Sie Ihren Browser dazu, mit JavaScript zu sprechen
Inhaltsverzeichnis 1. Das einfachste Beispiel 2. ...
So zeigen Sie eine PDF-Datei mit pdfjs in vue in der Vorschau an
Inhaltsverzeichnis Vorwort denken Analysieren und...
Interner Ereignisrückruf der Webkomponentenkomponente und Problempunktanalyse
Inhaltsverzeichnis Vorne geschrieben Was genau is...
So ändern Sie Farben und Designs in Vim unter Linux
Vim ist ein Texteditor, den wir unter Linux sehr ...
Hinweise zu Fallstricken bei Vuex und Pinia in Vue3
Inhaltsverzeichnis einführen Installation und Ver...