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
Was ist em? Einführung und Konvertierungsmethode von em und px
Was ist sie? „em“ bezieht sich auf die Schrifthöhe...
Kompilieren Sie CPP-Dateien mit G++ in Ubuntu
Als ich die CPP-Datei zum ersten Mal mit G++ komp...
Ausführliche Erläuterung des Fehlers beim Schreiben von SQL mit englischen einfachen Anführungszeichen "''"
Ich bin auf ein Problem gestoßen. Wenn beim Teste...
Ein kurzes Verständnis der drei Verwendungen von Standard-SQL-Update-Anweisungen
1. Umwelt: MySQL-5.0.41-win32 Windows XP Professi...
Eine kurze Erläuterung zum Anpassen der Hostdatei in Docker
Inhaltsverzeichnis 1. Befehl 2. docker-compose.ym...
Website-Homepage-Design im Illustrationsstil Neuer Trend im Website-Design
Sie können sehen, dass ihre visuellen Effekte sehr...
Detaillierte Erklärung der MySQL DEFINER-Verwendung
Inhaltsverzeichnis Vorwort: 1. Kurze Einführung i...
So lösen Sie das jQuery-Konfliktproblem
In der Frontend-Entwicklung ist $ eine Funktion i...
So installieren Sie MySQL über SSH auf einem CentOS VPS
Geben Sie yum install mysql-server Drücken Sie Y,...
Zusammenfassung der mathematischen Symbole in Unicode
In der Mathematik, Physik und einigen wissenschaf...
So beheben Sie den 10060-Unknow-Fehler, wenn Navicat eine Remote-Verbindung zu MySQL herstellt
Vorwort: Heute möchte ich mich per Remote-Zugriff...
Docker verwendet ein einzelnes Image zum Zuordnen zu mehreren Ports
brauchen: Der Ressourcenserver der offiziellen We...
Entwicklung eines Miniprogramms zur Implementierung einer einheitlichen Verwaltung von Access_Token
Inhaltsverzeichnis TOKEN Timer-Aktualisierung 2. ...
Gängige Methoden der Vue-Komponentenbildung: Übertragung und Kommunikation von Komponentenwerten
Verwandte Wissenspunkte Übergeben von Werten von ...
jQuery erzielt den Shutter-Effekt (mithilfe der Li-Positionierung)
In diesem Artikel wird der spezifische Code von j...