Entwickeln Sie Beispielcode für einen Taschenrechner mit nativem JavaScript

<div class="calculator_wrap" id="calculator"><!--Element für Rechner-Outsourcing-->
 <div class="show_num"><!--Zahlenbereich anzeigen-->
 <div class="num_save" id="numSave"></div><!--Berechnungsformel-->
 <div class="num_cur" id="numCur">0</div><!--Berechnungsergebnis-->
 <div class="show_m" id="showM">M</div><!--Speicherlogo-->
 </div>
 <div class="btn_wrap" id="btnWrap"><!--Schaltflächenbereich-->
 <div class="btn" data-key="MC">MC</div><!--Speicher löschen-->
 <div class="btn" data-key="MR">MR</div><!--Speicher lesen-->
 <div class="btn" data-key="MS">MS</div><!--Speicher-->
 <div class="btn" data-key="MA">M+</div><!--Speicher plus-->
 <div class="btn" data-key="ML">M-</div><!--Speicherreduzierung-->
 <div class="btn" data-key="ZURÜCK">←</div><!--Rücktaste-->
 <div class="btn" data-key="CE">CE</div><!--Aktuelles löschen-->
 <div class="btn" data-key="Löschen">C</div><!--Löschen-->
 <div class="btn" data-key="Negate">±</div><!--Positive und negative Konvertierung-->
 <div class="btn" data-key="Square">√￣</div><!--Quadratwurzel-->
 <div Klasse="btn" Datenschlüssel="Num" Datenwert="7">7</div><!--7-->
 <div Klasse="btn" Datenschlüssel="Num" Datenwert="8">8</div><!--8-->
 <div Klasse="btn" Datenschlüssel="Num" Datenwert="9">9</div><!--9-->
 <div class="btn" data-key="Base" data-value="/">/</div><!--Außer-->
 <div class="btn" data-key="Prozentsatz">%</div><!--Prozentzeichen-->
 <div Klasse="btn" Datenschlüssel="Num" Datenwert="4">4</div><!--4-->
 <div Klasse="btn" Datenschlüssel="Num" Datenwert="5">5</div><!--5-->
 <div Klasse="btn" Datenschlüssel="Num" Datenwert="6">6</div><!--6-->
 <div class="btn" data-key="Base" data-value="*">*</div><!--Multiplizieren-->
 <div Klasse="btn" Datenschlüssel="Reziprok">1/x</div> <!--Countdown-->
 <div Klasse="btn" Datenschlüssel="Anzahl" Datenwert="1">1</div><!--1-->
 <div Klasse="btn" Datenschlüssel="Num" Datenwert="2">2</div><!--2-->
 <div Klasse="btn" Datenschlüssel="Num" Datenwert="3">3</div><!--3-->
 <div Klasse="btn" Datenschlüssel="Basis" Datenwert="-">-</div><!--Minus-->
 <div class="btn gleich" data-key="Gleich">=</div><!--Gleich-->
 <div Klasse="btn null" Datenschlüssel="Num" Datenwert="0">0</div><!--0-->
 <div class="btn" data-key="Punkt">.</div><!--Dezimalpunkt-->
 <div Klasse="btn" Datenschlüssel="Basis" Datenwert="+">+</div><!--Hinzufügen-->
 </div>
</div>

.calculator_wrap{width:240px;height:360px;padding:10px;margin:30px auto;border:1px solid #8acceb;background:#d1f1ff;}
 .calculator_wrap .show_num{position:relative;padding:0 8px;height:60px;background:#fff;text-align:right;}
 .calculator_wrap .show_m{position: absolute;links:10px;unten:3px;anzeige:keine;}
 .calculator_wrap .num_save{Höhe:26px;Zeilenhöhe:26px;Schriftgröße:12px;Weißraum:nowrap;}
 .calculator_wrap .num_cur{Schriftgröße:28px;Höhe:34px;Zeilenhöhe:34px;}
 .calculator_wrap .btn_wrap{font-size:0px;}
 .calculator_wrap .btn{Anzeige:Inline-Block;Breite:38px;Höhe:38px;Zeilenhöhe:38px;Textausrichtung:Mitte;Rahmen:1px durchgehend #ccc;Hintergrund:#666;Farbe:#fff;Schriftgröße:14px;Rand:10px 10px 0 0;Cursor:Zeiger;}
 .calculator_wrap .btn:hover{background:#333;}
 .calculator_wrap .btn:nth-child(5n){margin-right:0px;}
 .calculator_wrap .equal{position:absolute;höhe:90px;zeilenhöhe:90px;}
 .calculator_wrap .zero{width:90px;}

//Ausgelagertes Element abrufen var eCalculator = document.getElementById('calculator');
//Berechnungsdaten (Formel) speichern Container var eNumSave = document.getElementById('numSave');
//Aktueller digitaler Container var eNumCur = document.getElementById('numCur');
//Externer Button-Container, wird für Ereignisproxy verwendet var eBtnWrap = document.getElementById('btnWrap');
//Speicherspeicher-Flag-Element var eShowM = document.getElementById('showM');

//Berechnungsformel var sStep = '';
//Aktuelle Nummer var sCurValue = '0';
//Berechnungsergebnis var nResult = null;
//Operator var sMark = '';
//MR-Speicherspeicherdaten var nMvalue = 0;
//Eingabestatus. false: Geben Sie eine Zahl ein, die die ursprüngliche Zahl ersetzen soll; true: Geben Sie eine Zahl ein, die zur ursprünglichen Zahl hinzugefügt werden soll;
var bLogStatus = false;

//Outsourcing-Container fügt Mouse-Down-Ereignis hinzu, um zu verhindern, dass Text ausgewählt wird eCalculator.addEventListener('mousedown',function(event){
 //Verhindern Sie das Standardverhalten beim Drücken der Maus, um zu verhindern, dass der Text ausgewählt wird, wenn die Schaltfläche zu schnell angeklickt wird. event.preventDefault();
});

//Der Button-Container fügt ein Klickereignis hinzu, um alle Button-Operationen zu proxyen eBtnWrap.addEventListener('click',function(event){

});

eBtnWrap.addEventListener('klicken',Funktion(Ereignis){
 //Das angeklickte Element abrufen var eTarget = event.target;
 //Beurteilen Sie die gedrückte Taste var key = eTarget.dataset.key;
 //Den gedrückten Wert abrufen var value = eTarget.dataset.value;
});

eBtnWrap.addEventListener('klicken',Funktion(Ereignis){
 /* … */

 //Feststellen, ob die Schaltfläche angeklickt wurde if(key){
 //Verwende die switch-Anweisung, um die entsprechende Operation verschiedener Tasten zu bestimmen switch(key){
  //Zifferntasten zum Ausführen von Operationen, Fall „Num“:
  fnInputNum(Wert);
  brechen;
  //Dezimalpunktoperation im Fall 'Punkt':
  //Beurteilen Sie, ob ein Dezimalpunkt vorhanden ist, um die Eingabe auf nur einen Dezimalpunkt zu beschränken, if(sCurValue.indexOf('.')==-1){
   sAktueller Wert = sAktueller Wert + '.';
   bLogStatus = wahr;
  }
  brechen;
 }
 //Daten im Anzeigenummernbereich anzeigen fnShowResult();
 }
});
//Zahleneingabefunktion fnInputNum(num){
 //Bestimmen Sie, ob die aktuelle Nummer ersetzt oder der aktuellen Nummer hinzugefügt werden soll, basierend auf dem Eingabestatus, wenn (bLogStatus) {
 sAktuellerWert = sAktuellerWert + Num;
 }anders{
 //Beschränken Sie die erste Zahl auf einen Wert ungleich 0
 wenn(num!=0){
  bLogStatus = wahr;
 }
 sAktueller Wert = Zahl;
 }
}
//Berechnungsergebnisse anzeigen Funktion fnShowResult(){
 //Berechnungsformel anzeigen eNumSave.innerHTML = sStep;
 //Begrenzen Sie die Gesamtlänge der Zahlen if(sCurValue.length>14){
 sAktuellerWert = sAktuellerWert.slice(0,14);
 }
 //Aktuelle Nummer anzeigen eNumCur.innerHTML = sCurValue;
}

eBtnWrap.addEventListener('klicken',Funktion(Ereignis){
 /* … */

 //Feststellen, ob die Schaltfläche angeklickt wurde if(key){
 //Verwende die switch-Anweisung, um die entsprechende Operation verschiedener Tasten zu bestimmen switch(key){
  /* … */
  //Grundrechenarten Addition, Subtraktion, Multiplikation und Division im Fall „Basis“:
  fnBaseCount(Wert);
  brechen;
  // Fall 'Gleich':
  fnEqual();
  brechen;
 }
 //Daten im Anzeigenummernbereich anzeigen fnShowResult();
 }
});
//Berechnungsergebnis Funktion fnCountResult(){
 //Beurteile den aktuellen Operator und führe die Operation switch(sMark) aus{
 Fall '+':
  nResult = nResult===null?+sAktuellerWert:nResult + (+sAktuellerWert);
  brechen;
 Fall '-':
  nResult = nResult===null?+sAktuellerWert:nResult - sAktuellerWert;
  brechen;
 Fall '*':
  nResult = nResult===null?+sAktuellerWert:nResult * sAktuellerWert;
  brechen;
 Fall '/':
  nResult = nResult===null?+sAktuellerWert:nResult / sAktuellerWert;
  brechen;
 Standard:
  nErgebnis = +sAktuellerWert;
 }
}
//Grundlegende Operationen der Addition, Subtraktion, Multiplikation und Division Funktion fnBaseCount(Schlüssel){
 //Wenn es sich um einen Eingabestatus handelt, führen Sie die Berechnung durch, wenn (bLogStatus) { 
 //Eingabestatus ändern bLogStatus = false;
 //Berechnungsformel sStep = sStep + ' ' + sCurValue + ' ' + key;
 //Berechnungsergebnisse fnCountResult();
 sAktueller Wert = ''+nErgebnis;
 }anders{
 //Wenn die Formel leer ist, addiere zuerst die ursprüngliche Zahl if(sStep==''){ 
  sStep = sAktueller Wert + ' ' + Schlüssel;
 }else{ //Wenn eine Formel vorhanden ist, ändere den letzten Operator sStep = sStep.slice(0,sStep.length-1) + ' ' + key;
 }
 }
 //Ändern Sie den zu berechnenden Operator sMark = key;
}
//Gleich der Funktion fnEqual(){
 //Wenn kein Operator vorhanden ist, nachfolgende Operationen verhindern if(sMark=='')return;
 //Berechnungsergebnisse fnCountResult();
 sAktuellerWert = ''+nErgebnis;
 //Daten zurücksetzen sStep = '';
 sMark = '';
 bLogStatus = falsch;
}

eBtnWrap.addEventListener('klicken',Funktion(Ereignis){
 /* … */

 //Feststellen, ob die Schaltfläche angeklickt wurde if(key){
 //Verwende die switch-Anweisung, um die entsprechende Operation verschiedener Tasten zu bestimmen switch(key){
  /* … */

  // Klarer Fall 'Clear':
  fnLöschen()
  brechen;
  //Rücktaste im Fall „BACK“:
  fnZurück();
  brechen;
  //CE
  Fall 'CE':
  // Den aktuell angezeigten Wert löschen sCurValue = '0';
  bLogStatus = falsch;
  brechen;
  //Negieren Fall 'Negate':
  //Aktueller Wert invertiert sCurValue = ''+(-sCurValue);
  brechen;
  // Nehmen wir den Fall „Quadrat“ als Quadratwurzel:
  //Ziehen Sie die Quadratwurzel des aktuellen Werts nResult = Math.sqrt(+sCurValue);
  //Initialisierung anderer Daten sCurValue = ''+nResult;
  sSchritt = '';
  sMark = '';
  bLogStatus = falsch;
  brechen;
  //Countdown-Fall „Reziprok“:
  //Holen Sie sich den Kehrwert des aktuellen Werts //Initialisierung weiterer Daten nResult = 1/sCurValue;
  sAktuellerWert = ''+nErgebnis;
  sSchritt = '';
  sMark = '';
  bLogStatus = falsch;
  brechen;
  //M-Serienfall 'MC':
  // Speicherwert löschen nMvalue = 0;
  fnShowM()
  brechen;
  Fall 'MR':
  //Speicherwert anzeigen sCurValue = '' + nMvalue;
  fnShowM()
  brechen;
  Fall 'MS':
  //Ändere den Speicherwert auf den aktuellen Wert nMvalue = +sCurValue;
  fnShowM()
  brechen;
  Fall 'MA':
  //Den aktuellen Wert zum Speicherwert hinzufügen nMvalue += +sCurValue;
  fnShowM()
  brechen;
  Fall 'ML':
  //Subtrahieren Sie den aktuellen Wert nMvalue -= +sCurValue vom Speicherwert;
  fnShowM()
  brechen;
 }
 //Daten im Anzeigenummernbereich anzeigen fnShowResult();
 }
});
//Funktion löschen fnClear(){
 //Alle Daten initialisieren sStep = '';
 sAktueller Wert = '0';
 nErgebnis = null;
 sMark = '';
 bLogStatus = falsch;
}
//Rücktaste-Funktion fnBack(){
 //Sie müssen sich im Eingabemodus befinden, um die Rücktaste zu drücken, if (bLogStatus) {
 //Subtrahiere die letzte Ziffer des Wertes sCurValue = sCurValue.slice(0,sCurValue.length-1);
 //Wenn der letzte Wert leer oder negativ (-) ist, ändere ihn auf 0, setze den Eingabestatus auf „false“ zurück und es ist keine Rücktaste zulässig, wenn (sCurValue==''||sCurValue=='-'){
  sAktueller Wert = '0';
  bLogStatus = falsch;
 }
 }
}
//Beurteilen, ob M-Speicher vorhanden ist Funktion fnShowM(){
 bLogStatus = falsch;
 //Beurteilen, ob die Speichermarkierung angezeigt werden soll eShowM.style.display = nMvalue==0?'none':'block';
}

//Tastaturereignis document.addEventListener('keyup',function(event){
 //Aktuelle Tastaturtaste abrufen var key = event.key;
 //Holen Sie sich den Schlüsselcode
 var Code = Ereignis.Schlüsselcode;
 //Begrenzen Sie die Anzahl der korrekten Tastenanschläge zum Ändern der angezeigten Daten. var compliant = false;
 //Nummer eingebenwenn((code>=48&&code<=57)||(code>=96&&code<=105)){
 fnInputNum(Taste);
 entsprechen = wahr;
 }
 //Addition, Subtraktion, Multiplikation und Divisionwenn(Schlüssel=='*'||Schlüssel=='+'||Schlüssel=='/'||Schlüssel=='-'){
 fnBaseCount(Schlüssel);
 entsprechen = wahr;
 }
 //Esc-Tasteif(code==27){
 fnLöschen();
 entsprechen = wahr;
 }
 //Taste eingebenif(code==13){
 fnEqual();
 entsprechen = wahr;
 }
 //Rücktasteif(code==8){
 fnZurück();
 entsprechen = wahr;
 }
 wenn(entsprechen){
 //Daten auf dem Taschenrechner-Bildschirm anzeigen fnShowResult();
 }
});