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
Beispiel zur Optimierung der MySQL-Einfügeleistung
MySQL-Leistungsoptimierung Die MySQL-Leistungsopt...
Detaillierter Installationsprozess des NodeJS-Verwaltungstools NVM
keine Ahnung nvm ist für die Verwaltung mehrerer ...
Ein kurzer Vortrag über die Kenntnisse, die Sie für den Einstieg in Vue beherrschen müssen
Als eines der beliebtesten Front-End-Frameworks i...
Besprechen Sie den Entwicklungstrend der Baidu Encyclopedia UI
<br />Die offizielle Version der Baidu-Enzyk...
So vermeiden Sie die Duplizierung von Daten beim Einfügen in einen MySql-Batch
Inhaltsverzeichnis Vorwort 1. Einfügen von ignore...
Erfahren Sie, wie Sie Docker unter Windows 10 Home Edition installieren.
Als ich die Bücher über Redis und Spring Cloud Al...
So exportieren Sie eine CSV-Datei mit Header in MySQL
Siehe das offizielle Dokument http://dev.mysql.co...
Detaillierte Erläuterung der CSS BEM-Schreibstandards
BEM ist ein komponentenbasierter Ansatz zur Weben...
Detaillierte Erläuterung der Kapselung von JavaScript-Animationsfunktionen
Inhaltsverzeichnis 1. Prinzip der Animationsfunkt...
Über das Problem beim Schreiben von Plugins zum Mounten von DOM in vue3
Im Vergleich zu vue2 verfügt vue3 über ein zusätz...
So verarbeiten Sie sehr große Formularbeispiele mit Vue+ElementUI
Aufgrund von Geschäftsanpassungen im Unternehmen ...
So geben Sie Flash-Seiten über Überprüfungsmethoden in Website-Standards frei
1. Embed ist illegal Das <embed>-Tag ist ein...
Analyse und Lösung des beim Start von MySQL gemeldeten Fehlers „ERROR:2002“
Vorwort Dieser Artikel stellt hauptsächlich die A...
So finden Sie identische Dateien in Linux
Während der Nutzung des Computers entsteht im Sys...
Einfaches Anwendungsbeispiel für eine rekursive Vue-Komponente
Vorwort Ich glaube, dass viele Studenten bereits ...