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

Beispielcode für die Verwendung von @media in CSS3 zur Anpassung einer Webseite

Heutzutage wird die Bildschirmauflösung von Compu...

So installieren und implementieren Sie MySQL 8.0 unter CentOS8

Die offizielle Version 8.0.11 von MySQL 8 wurde v...

CSS zum Erzielen eines Popup-Fensters oben und unten, links und rechts in der Mitte und eines transparenten Hintergrund-Sperrfenstereffekts

Es gibt eine einfache CSS-Methode, um das Popup-F...

Detaillierte Erläuterung der MySQL-Cursor-Konzepte und -Verwendung

Dieser Artikel erläutert anhand von Beispielen da...

Unverzichtbar für die Frontend-Entwicklung: 12 empfohlene Tools zum Testen der Browserkompatibilität

Für Frontend-Entwickler ist es eine zeitaufwändig...

Centos6.9-Installation Mysql5.7.18 Schrittaufzeichnung

Installationsreihenfolge rpm -ivh mysql-community...

Detailliertes Tutorial zur Installation von MySQL unter Linux

1. Beenden Sie den MySQL-Dienst # service mysqld ...

Vollständiger Prozessdatensatz zur Fehlerbehebung bei MySQL DeadLock

【Autor】 Liu Bo: Leitender Datenbankmanager im Ctr...

Detaillierte Erläuterung der Deep Copy und Shallow Copy im JS-Variablenspeicher

Inhaltsverzeichnis Variabler Typ und Speicherplat...

Zwei Möglichkeiten zum Starten des Linux-Bootdienstes

Inhaltsverzeichnis rc.local-Methode chkconfig-Met...

Schritte zum Einrichten des Windows Server 2016 AD-Servers (Bild und Text)

Einführung: AD ist die Abkürzung für Active Direc...

JavaScript-Operationselemente zeigen Ihnen, wie Sie den Seiteninhaltsstil ändern

Inhaltsverzeichnis 1. Bedienelemente 1.1. Element...

Unterschiede zwischen MySQL MyISAM und InnoDB

Der Unterschied: 1. InnoDB unterstützt Transaktio...

JavaScript-Grundlagen: Funktion zur sofortigen Ausführung

Inhaltsverzeichnis Funktionsformat sofort ausführ...

JS erzielt Fünf-Sterne-Lobeffekt

Verwenden Sie JS, um objektorientierte Methoden z...