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 der Installationsschritte der dekomprimierten MySQL-Version

1. Gehen Sie zur offiziellen Website: D:\mysql-5....

WePY-Cloud-Entwicklungspraxis im Linux-Befehlsabfrage-Applet

Hallo zusammen, heute werde ich mit Ihnen die WeP...

Detaillierte Erläuterung des Anwendungsbeispiels für den JQuery-Tag-Selektor

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung des TARGET-Attributs des HTML-Hyperlink-Tags A

Das Hyperlink-Tag <a> stellt einen Linkpunkt...

CSS Houdini erzielt einen dynamischen Welleneffekt

CSS Houdini gilt als die aufregendste Innovation ...

Mehrere Lösungen zum Vergessen des MySQL-Passworts

Lösung 1 Deinstallieren Sie vollständig und lösch...

Detaillierte Erklärung des TodoList-Falls von Vue

<Vorlage> <div id="Wurzel">...

Installieren von MySQL 8.0.12 basierend auf Windows

Dieses Tutorial ist nur auf Windows-Systemen anwe...

Führen Sie die Schritte zum Konfigurieren einer statischen IP-Adresse für eine virtuelle Linux-Maschine aus

Vorwort In vielen Fällen werden wir virtuelle Mas...

Warum wird mir die Zugriffsschnittstelle für Docker Tomcat nicht angezeigt?

Frage: Kann der Ursprungsserver keine Darstellung...

So konfigurieren Sie zwei oder mehr Sites mit dem Apache-Webserver

So hosten Sie zwei oder mehr Sites auf dem belieb...

Eine kurze Erläuterung des Lazy-Loading-Attributmusters in JavaScript

Inhaltsverzeichnis 1. Einleitung 2. On-Demand-Att...

Tutorial zur Installation von mysql5.7.17 über yum auf redhat7

Die Linux-Betriebssysteme der RHEL/CentOS-Reihe v...

Geplante vollständige MySQL-Datenbanksicherung

Inhaltsverzeichnis 1. MySQL-Datensicherung 1.1. m...

Einführung in die Installation und Konfiguration von JDK unter CentOS-Systemen

Inhaltsverzeichnis Vorwort Überprüfen und deinsta...