Heim > Artikel > Web-Frontend > Bringen Sie Ihnen einen Trick bei, um einen einfachen Taschenrechner zu implementieren
Bringen Sie Ihnen einen Trick bei, um einen einfachen Taschenrechner zu implementieren
- 醉折花枝作酒筹nach vorne
- 2021-04-22 09:16:493264Durchsuche
Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Methode zur Implementierung eines einfachen Taschenrechners in JavaScript. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
JS zur Implementierung eines einfachen Taschenrechners
Seitenlayout-Design (HTML + CSS)
Da ich HTML und CSS in meinem vorherigen Blog ausführlich erklärt habe, werde ich nicht noch einmal auf Details eingehen und direkt darauf eingehen der Code. Da der JQuery-Selektor in js verwendet wird, wird JQuery im HTML mit dem Tag <script></script> eingeführt. Im HTML ist das Rechnerereignis cal() an jeden Schaltflächenklick gebunden und das aktuelle Klickobjekt ging hinein. dies.
.html-Datei:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>简单计算器</title>
<link rel="stylesheet" type="text/css" href="./style.css"> <!-- css样式 -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script> <!-- 引用JQuery库 --></head><body>
<p>
<table>
<tr>
<td colspan="3"><input type="text" value="0"/></td>
</tr>
<tr>
<td><button id="c11" onclick="cal(this)">+</button></td>
<td><button id="c12" onclick="cal(this)">-</button></td>
<td><button id="c13" onclick="cal(this)">×</button></td>
<td><button id="c14" onclick="cal(this)">/</button></td>
</tr>
<tr>
<td><button id="c21" onclick="cal(this)" value="7">7</button></td>
<td><button id="c22" onclick="cal(this)" value="8">8</button></td>
<td><button id="c23" onclick="cal(this)" value="9">9</button></td>
<td rowspan="2"><button id="c24" onclick="cal(this)">C</button></td>
</tr>
<tr>
<td><button id="c31" onclick="cal(this)" value="4">4</button></td>
<td><button id="c32" onclick="cal(this)" value="5">5</button></td>
<td><button id="c33" onclick="cal(this)" value="6">6</button></td>
</tr>
<tr>
<td><button id="c41" onclick="cal(this)" value="1">1</button></td>
<td><button id="c42" onclick="cal(this)" value="2">2</button></td>
<td><button id="c43" onclick="cal(this)" value="3">3</button></td>
<td rowspan="2"><button id="c44" onclick="cal(this)">=</button></td>
</tr>
<tr>
<td colspan="2"><button id="c51" onclick="cal(this)" value="0">0</button></td>
<td><button id="c53" onclick="cal(this)">.</button></td>
</tr>
</table>
</p>
<script src = "./calculator.js"></script> <!-- js脚本 --></body></html>.css-Datei:
input{
width: 200px;
height:50px;
margin-bottom: 10px;
padding: 0;
font:18px bold;}button{
width: 50px;
height: 40px;
margin-bottom: 10px;
border: 1px dashed black;
background-color: #ffc4cc;}#c24{
height: 93px;}#c44{
height: 93px;}#c51{
width: 122px;}#c44,#c24,#c14{
margin-left:10px;} Statische Seite wie gezeigt: 
Berechnungsteil (JS) implementieren
1. Funktion: Einfache Addition, Subtraktion, Multiplikation und Division von numerischen Berechnungen implementieren Werte und Funktion „Bildschirm löschen“
2. Zum Beispiel: 123×29; klicken Sie auf 1, 2, 3 und dann auf 
3. Nachteile: 
- kann nicht kontinuierlich berechnet werden und kann nur Operationen zwischen zwei Zahlen gleichzeitig durchführen. Wenn Sie die Berechnung mit dem vorherigen Ergebnis fortsetzen möchten, können Sie direkt auf „Arithmetik“ und „Nächste Zahl“ klicken zuerst den Bildschirm.
- 4. Ideenanzeige:
- Textfeldanzeige
- : Da sich der im Textfeld angezeigte Inhalt je nach angeklickter Schaltfläche in Echtzeit ändert, verwenden Sie zur Vereinfachung der Änderung den JQuery-Selektor zur Auswahl Geben Sie hier ein Textfeld ein und weisen Sie es einer globalen Variableneingabe zu. Anschließend können wir seinen Wert entsprechend der Eingabemethode val() ändern. Der Code lautet wie folgt:
var input = $("input");
- Abrufen der Schaltflächen-ID
- : Da wir später unterschiedliche Vorgänge basierend auf verschiedenen Schaltflächen ausführen müssen, besteht der erste Schritt in der Funktion cal() darin, die ID der Schaltfläche abzurufen um spätere Urteile zu erleichtern. Der Code lautet wie folgt:
let btn = e.id;
- Numerische Eingabe
- : Bestimmen Sie anhand der ID der Schaltfläche, ob es sich um eine Zahl oder einen Dezimalpunkt handelt. Wenn ja, führen Sie eine numerische Eingabe durch. Stellen Sie zunächst fest, ob der Wert des aktuellen Textfelds 0 ist. Wenn er 0 ist, überschreiben Sie den Eingabewert mit dem aktuellen Eingang. Wenn er nicht 0 ist, verbinden Sie den aktuellen Eingang hinter dem Eingabewert. Der Code lautet wie folgt:
//若input的值为0 input.val(btn_value);//若input的值非0 input.val(input.val()+btn_value);
- Symboleingabe
- : Bestimmen Sie anhand der ID der Schaltfläche, ob es sich um ein arithmetisches Symbol handelt. Wenn ja, führen Sie den Symboleingabevorgang aus. Ignorieren Sie kontinuierliche Operationen und stellen Sie zunächst fest, ob der Wert des aktuellen Textfelds + enthält. Das Operatorsymbol wird nach dem Eingabewert verbunden. Der Code lautet wie folgt:
//若input的值含有+、×、/
alert("连续运算功能未上线!")//若input的值不含有+、×、/
input.val(input.val()+当前运算符号);
- Numerische Berechnung
- : Bestimmen Sie anhand der ID der Schaltfläche, ob es sich um ein Gleichheitszeichen handelt, und führen Sie in diesem Fall numerische Berechnungsoperationen durch. Um eine Auswahlbeurteilung zu treffen, verwenden Sie die Methode indexOf(), um zu bestimmen, welches Satzzeichen der Eingabewert + enthält. Für num1 fangen Sie den Wert nach dem Symbol ab, erzwingen ihn in einen Float-Typ und weisen ihn dann num2 zu, um entsprechende Berechnungen durchzuführen. (Beachten Sie, dass der Nenner während der Division nicht 0 sein darf) Der Code lautet wie folgt:
if(input_value.indexOf("+")!==-1){
pos = input_value.indexOf("+");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1+num2);
}
else if(input_value.indexOf("-")!==-1){
pos = input_value.indexOf("-");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1-num2);
}
else if(input_value.indexOf("×")!==-1){
pos = input_value.indexOf("×");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1*num2);
}
else if(input_value.indexOf("/")!==-1){
pos = input_value.indexOf("/");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
if(num2-0 === 0){
alert("分母不能为0！");
}
else{
input.val(num1/num2);
}
}
- Bildschirm löschen
- : Bestimmen Sie anhand der ID der Schaltfläche, ob es sich um das Symbol C handelt. Wenn ja, führen Sie den Bildschirm aus Räumungsvorgang. Der Code lautet wie folgt:
input.val(0);5 Die JavaScript-Datei lautet wie folgt:
"use strict"var input = $("input");function cal(e){
let btn = e.id;
//清零
if( btn === "c24"){
input.val(0);
}
//数值输入
else if(btn === "c51"||btn === "c41"||btn === "c42"||btn === "c43"
||btn === "c31"||btn === "c32"||btn === "c33"
||btn === "c21"||btn === "c22"||btn === "c23"){
let btn_value = document.getElementById(btn).getAttribute("value");
if( input.val() === "0" ){
input.val(btn_value);
}
else{
input.val(input.val()+btn_value);
}
}
else if(btn === "c11"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"+");
}
else{
alert("连续运算功能未上线!")
}
}
else if(btn === "c12"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"-");
}
else{
alert("连续运算功能未上线!")
}
}
else if(btn === "c13"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"×");
}
else{
alert("连续运算功能未上线!")
}
}
else if(btn === "c14"){
let input_value = input.val();
if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
&&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
input.val(input.val()+"/");
}
else{
alert("连续运算功能未上线!")
}
}
else if(btn === "c53"){
input.val(input.val()+".");
}
else if(btn === "c44"){
let pos,num1,num2;
let input_value = input.val();
if(input_value.indexOf("+")!==-1){
pos = input_value.indexOf("+");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1+num2);
}
else if(input_value.indexOf("-")!==-1){
pos = input_value.indexOf("-");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1-num2);
}
else if(input_value.indexOf("×")!==-1){
pos = input_value.indexOf("×");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
input.val(num1*num2);
}
else if(input_value.indexOf("/")!==-1){
pos = input_value.indexOf("/");
num1 = parseFloat(input_value.substring(0,pos));
num2 = parseFloat(input_value.substring(pos+1,input_value.length));
if(num2-0 === 0){
alert("分母不能为0！");
}
else{
input.val(num1/num2);
}
}
}}[Empfohlenes Lernen:
Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen einen Trick bei, um einen einfachen Taschenrechner zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!