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

js, um eine einfache Produkt-Screening-Funktion zu erreichen

In diesem Artikelbeispiel wird der spezifische JS...

So zeigen Sie JSON-Daten auf einer HTML-Seite an und formatieren sie

JSON-Daten werden auf der HTML-Seite angezeigt un...

HTML-Codebeispiel: Detaillierte Erklärung von Hyperlinks

Hyperlinks sind die am häufigsten verwendeten HTM...

MySQL ermöglicht langsame Abfragen (Einführung in die Verwendung der EXPLAIN-SQL-Anweisung)

Heutzutage werden Datenbankoperationen immer häuf...

So ändern Sie schnell das Root-Passwort unter CentOS8

Starten Sie die virtuelle Centos8-Maschine und dr...

Verwaltung privater Docker-Repositorys und Löschen von Bildern in lokalen Repositorys

1: Installation eines privaten Docker-Warehouses ...

Lösen Sie das Problem des MySql8.0-Prüfungsfehlers der Transaktionsisolationsebene

Inhaltsverzeichnis MySql8.0 Fehler bei der Transa...

10 Tipps für das User Interface Design mobiler Apps

Tipp 1: Konzentriert bleiben Die besten mobilen A...

Optimierte Aufzeichnung der Verwendung von IN-Datenvolumen in Mysql

Die MySQL-Versionsnummer ist 5.7.28. Tabelle A ha...

So optimieren Sie den Logikbeurteilungscode in JavaScript

Vorwort Zu den logischen Urteilsaussagen, die wir...

CentOS 6-7 Yum-Installationsmethode für PHP (empfohlen)

1. Überprüfen Sie die aktuell installierten PHP-P...

React+axios implementiert die Suchbenutzerfunktion von GitHub (Beispielcode)

laden Anforderung erfolgreich Anforderung fehlges...

Entmystifizierung des HTML 5-Arbeitsentwurfs

Das World Wide Web Consortium (W3C) hat einen Entw...

5 MySQL-GUI-Tools, die Ihnen bei der Datenbankverwaltung empfohlen werden

Es gibt viele Datenbankverwaltungstools für MySQL...

Eine kurze Erläuterung des zugrunde liegenden Prinzips von MySQL Join

Inhaltsverzeichnis Join-Algorithmus Der Unterschi...