JavaScript-Simulationsrechner

JavaScript-Simulationsrechner

In diesem Artikel wird der spezifische Code des JavaScript-Simulationsrechners zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Funktion:

1. Klicken Sie auf die Schaltfläche, um die Nummer einzugeben
2. Implementieren Sie grundlegende Rechenoperationen und fügen Sie die erforderliche Ausnahmebehandlung hinzu.
3. Implementieren Sie die Dezimalpunktfunktion und fügen Sie eine Ausnahmebehandlung hinzu: Der Dezimalpunkt kann nur einmal erscheinen
4. Implementieren Sie die positive und negative Vorzeichenfunktion
5. Implementieren Sie die Abdankungsfunktion. Wenn es die letzte Ziffer ist, zeigt das Anzeigefeld 0 an
6. AC-Bildschirmlöschfunktion

Verwendete Wissenspunkte:

1. Verwenden Sie eine große Anzahl benutzerdefinierter Funktionen, um Geschäftslogik zu implementieren
2. Flexibler Einsatz von Events und Event-Verarbeitung
3. Programmiermethoden zur Ausnahmebehandlung entwickeln
4. Pflegen und üben Sie die Verwendung verschiedener Ideen zur Implementierung von Programmierung

Zweck umfassender Übungen:

1. Kombinieren Sie CSS, HTML und JS effektiv, um Geschäftsfunktionen zu realisieren
2. Programmierideen, Problemlösungsfähigkeiten und -methoden trainieren und kultivieren
3. Üben und kultivieren Sie den Einsatz verschiedener Programmierideen, um vorab festgelegte Ziele zu erreichen

Und ich habe erst vor kurzem angefangen, JS zu lernen, und ich finde es sehr interessant. Als ich die Grundlagen von Java lernte, war ich nicht so interessiert. Ich finde, dass js sehr interessant ist, wenn ich es zum ersten Mal benutze. Hier ist ein einfacher Quellcode für einen Taschenrechner:

html-Seite:

<!DOCTYPE html>
<html>
<Kopf>
 <title>js-Rechner</title>
<link rel="stylesheet" type="text/css" href="index.css" >
<script type="text/javascript" src="index.js">
</Skript>
</Kopf>
<body onload="init()">
 <!-- 1 Textfeld 10 Zahlen .... 20 Schaltflächen -->
<div id="div1">
 <Formularaktion="">
 <div id="div2">
 <input Typ="Text" Name="Nummer" deaktiviert="deaktiviert" ID="Nummer" Wert="0">
 </div>
 </form>
 <div id="div3">
 <Eingabetyp="Schaltfläche" Name="" Wert="C" ID="baidu">
 <Eingabetyp="Schaltfläche" Name="" Wert="←" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="+/-" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="/" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="7" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="8" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="9" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="*" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="4" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="5" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="6" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="-" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="1" ID="" >
 <Eingabetyp="Schaltfläche" Name="" Wert="2" ID="" >
 <Eingabetyp="Schaltfläche" Name="" Wert="3" ID="" >
 <Eingabetyp="Schaltfläche" Name="" Wert="+" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="0" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="=" ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="." ID="">
 <Eingabetyp="Schaltfläche" Name="" Wert="AC" ID="">
 </div>
</div>
</body>
</html>

js-Seite:

Funktion init(){
 var num = document.getElementById("num");
 Anzahl.Wert=0;
 var btn_num1;
 var fh;
 num.disabled="deaktiviert";
 // var n1=document.getElementById("n1");
 //n1.onclick=Funktion(){
 // }
 var oButton = document.getElementsByTagName("Eingabe");
 für(var i=0;i<oButton.length;i++){
 oButton[i].onclick=function(){
 wenn (istZahl (dieser.Wert)) {
 //num.value=(num.value+this.value)*1; //Eliminiere die Standardeinstellung 0 if(isNull(num.value)){
 num.value=dieser.wert;
 }anders{
 Anzahl.Wert=Anzahl.Wert+dieser.Wert;
 }
 }anders{
 //Testen, ob die Funktion korrekt ist// alert("bushishuzi")
 var btn_num=dieser.Wert;
 //Testen, ob die Funktion korrekt ist (Popup-Fenster)
 // Alarm(btn_num);
 Schalter(btn_num){
 Fall "+":
 // Alarm (11);
 btn_num1=num.value*1; //=parseInt(num.value) Das ist auch OK, die folgenden Wörter müssen in Zahlen geändert werden
 Anzahl.Wert=0;
 fh="+";
 brechen;
 Fall "-":
 btn_num1=num.wert*1;
 Anzahl.Wert=0;
 fh="-";
 brechen;
 Fall "*":
 btn_num1=num.wert*1;
 Anzahl.Wert=0;
 fh="*";
 brechen;
 Fall "/":
 btn_num1=num.wert*1;
 Anzahl.Wert=0;
 fh="/";
 brechen;
 Fall ".":
 num.value=dez_zahl(num.value);
 brechen;
 Fall "←":
 Anzahl.Wert=zurück(Anzahl.Wert);
 brechen;
 Fall "+/-":
 Anzahl.Wert=Zeichen(Anzahl.Wert);
 brechen;
 Fall "AC":
 Anzahl.Wert="0";
 brechen;
 Fall "C":
 init_baidu();
 brechen;
 Fall "=":
 Schalter(fh){
 Fall"+":
 Anzahl.Wert=btn_Anzahl1+Anzahl.Wert*1;
 brechen;
 Fall"-":
 Anzahl.Wert=btn_Anzahl1-Anzahl.Wert*1;
 brechen;
 Fall"*":
 Anzahl.Wert=btn_Anzahl1*Anzahl.Wert*1;
 brechen;
 Fall"/":
 wenn(Anzahl.Wert==0){
 Anzahl.Wert=0;
 alert("Der Divisor kann nicht 0 sein");
 }anders{
 Anzahl.Wert=btn_Anzahl1/Anzahl.Wert*1;
 }
 brechen;
 }
 brechen;
 }
 }
 }
 }
}
//Dezimalpunktfunktion function dec_number(n){
 wenn(n.indexOf(".")==-1){
 n=n+".";
 }
 Rückkehr n;
}
//Überprüfen Sie, ob das Textfeld leer oder 0 ist
Funktion istNull(n){
 wenn(n*1==0||n.Länge==0){
 gibt true zurück;
 }anders{
 gibt false zurück;
 }
}
//Zurück-Taste Funktion back(n){
 n=n.substr(0,n.Länge-1);
 wenn (istNull(n)) {
 n="0";
 }
 Rückkehr n;
}
//Positive und negative Vorzeichen +/-
Funktion sign(n) {
 wenn(n.indexOf("-")==-1){
 n="-"+n;
 }anders{
 n=n.substr(1,n.Länge);
 }
 Rückkehr n;
}
//isNaN: kann nicht in eine Zahl umgewandelt werden: true, kann in eine Zahl umgewandelt werden: false
Funktion istZahl(n){
 gibt !isNaN(n) zurück;
 }
 //Button C verwendet einen Hyperlink zu Baidu, der nach Belieben verwendet werden kann. function init_baidu(){
 window.location.href="http://www.baidu.com";
}

CSS-Seite:

*{
 Rand: 0px;
 Polsterung: 0px;
}
div{
 Breite: 170px;
}
#div1{
 oben: 60px;
 links: 100px;
 Position: absolut;
}
Eingabe[Typ="Schaltfläche"]{
 Breite: 30px;
 Rand rechts: 5px;
}
Eingabe[Typ="Text"]{
 Breite: 147px;
 Textausrichtung: rechts;
 Hintergrundfarbe: weiß;
 Rand: 1px durchgezogen;
 Polsterung rechts: 1px;
 Boxgröße: Inhaltsbox;
}
input[type="button"]:hover{/*//Verwendung von Pseudoklasse und Button*/
 Hintergrundfarbe: weiß;
 Rand: 1px durchgezogen;
}

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:
  • js genaue Countdown-Funktion teilen
  • Supergenaue Javascript-Methode zur Überprüfung der ID-Nummer
  • js Drag & Drop-Tabelle zur Realisierung der Inhaltsberechnung
  • js implementiert einen einfachen Rechner
  • JS-Implementierung des Apple-Rechners
  • JavaScript zum Erreichen einer einfachen Rechnerfunktion
  • So berechnen Sie die Anzahl der Textzeilen in JavaScript
  • Einfacher JavaScript-Rechner im klassischen Fall
  • js genaue Berechnung

<<:  Ubuntu-Grundeinstellungen: Installation und Nutzung des OpenSSH-Servers

>>:  Kostenloses Tutorial zur Installationskonfiguration der Version MySQL 5.7.18

Artikel empfehlen

Detaillierte Erläuterung des vollständigen Anwendungsbeispiels zur Entwicklung von Hyperf unter Docker

Offizielle Hyperf-Website Hyperf offizielle Dokum...

Erfahrung im Selbststudium von CSS-Optimierungsfähigkeiten

1. Verwenden Sie CSS-Sprites. Der Vorteil besteht ...

Lösung für das Problem der großen Schriftgröße auf iPhone-Geräten in WAP-Seiten

Wenn Sie keine Javascript-Steuerung verwenden möch...

Lassen Sie uns über Parameter in MySQL sprechen

Vorwort: In einigen früheren Artikeln haben wir h...

Fortgeschrittenes Front-End, das Ihnen die Verwendung der Javascript-Speicherfunktion beibringt

Inhaltsverzeichnis Vorwort Hintergrund Umsetzungs...

Detaillierte Erläuterung der Konfigurationsmethode der Lese-/Schreibtrennung bei der MySQL-Master-Slave-Replikation

1. Beschreibung Früher haben wir über die Install...

Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)

Vorwort Bei der Entwicklung eines Projekts stieß ...

Die Reihenfolge der Ereignisausführung in der Knotenereignisschleife

Inhaltsverzeichnis Ereignisschleife Ereignisschle...

Implementierungscode zur automatischen Anpassung der Breite der Webseite an die Breite des Handy-Bildschirms (Viewport)

Die allgemeine Schreibweise ist wie folgt: XML/HT...

Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten

Inhaltsverzeichnis Überblick 1. Übersicht über Ei...

Einfaches Beispiel zum Hinzufügen und Entfernen von HTML-Knoten

<br />Einfaches Beispiel zum Hinzufügen und ...

Vergleich der Effizienz verschiedener Methoden zum Löschen von Dateien in Linux

Testen Sie die Effizienz des Löschens einer große...

So legen Sie den Standardwert eines MySQL-Felds fest

Inhaltsverzeichnis Vorwort: 1. Standardwertbezoge...

Grundkenntnisse in HTML: ein erstes Verständnis von Webseiten

HTML ist die Abkürzung für Hypertext Markup Langua...

Zusammenfassung der 16 XHTML1.0- und HTML-Kompatibilitätsrichtlinien

1. Vermeiden Sie es, die Seite als XML-Typ zu dek...