Heim > Artikel > Web-Frontend > So implementieren Sie einen Taschenrechner mit JavaScript
So implementieren Sie einen Taschenrechner mit JavaScript
- 亚连Original
- 2018-06-15 23:17:341615Durchsuche
In diesem Artikel wird hauptsächlich die in JavaScript implementierte ultraeinfache Taschenrechnerfunktion vorgestellt, die die grundlegenden vier Rechenoperationen realisieren kann und über Überprüfungsfunktionen verfügt. Der Code ist zum leichteren Verständnis mit detaillierteren Kommentaren ausgestattet
Das Beispiel in diesem Artikel beschreibt die ultraeinfache Taschenrechnerfunktion, die in JavaScript implementiert ist. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Werfen wir zunächst einen Blick auf den Laufeffekt:
Der spezifische Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net JS计算器</title>
<script type="text/javascript">
// window.onload 获取元素getElementById
window.onload = function(){
var oTxt1 = document.getElementById('val01');
var oTxt2 = document.getElementById('val02');
var oFuhao = document.getElementById('fuhao');
// 这三个要放在button函数里面，因为s1.value是获取input里面的输入，但是这个时候还没有输入了
// var iNum1 = oTxt1.value;
// var iNum2 = oTxt2.value;
// var iNum3 = oFuhao.value;
oBtn = document.getElementById('btn');
// 计算按钮点击事件
oBtn.onclick = function(){
var iNum1 = oTxt1.value;
var iNum2 = oTxt2.value;
var iNum3 = oFuhao.value;
var iResult;
//如果两个输入有一个是空的话 //return是让if里面执行结束
if (iNum1=='' || iNum2=='') {
alert('不能为空');
return;
} //isNaN() 如果是true，说明是非数字，所以如果两个输入中有非数字，就提示alert
if (isNaN(iNum1) || isNaN(iNum2)) {
alert('不能有字母');
return;
} //对+-*/四个操作对应的value进行判断 //如果直接iNum1+iNum2 输出的结果是字符串的拼接 12+24 1224 所以要转换成parseInt整数
if (iNum3 == 0) {
iResult = parseInt(iNum1) + parseInt(iNum2)
}
else if (iNum3 == 1) {
iResult = parseInt(iNum1) - parseInt(iNum2)
}
else if (iNum3 == 2) {
iResult = parseInt(iNum1) * parseInt(iNum2)
}
else if (iNum3 == 3) {
iResult = parseInt(iNum1)/parseInt(iNum2)
}
alert(iResult);
}
}
</script>
</head>
<body>
<h3>计算器</h3>
<input type="text" id="val01">
<select id="fuhao">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" id="val02">
<input type="button" id="btn" value="计算">
</body>
</html>Das Obige ist der Text, den ich zusammengestellt habe, ich hoffe, er wird für alle hilfreich sein
Verwandte Artikel:
So generieren Sie ein zufällig verschlüsseltes Array in JS
In Gemeinsame Komponenten und Framework-Strukturen in Vue (ausführliches Tutorial)
So implementieren Sie animierte Kontrollkästchen in anime.js
Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Taschenrechner mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!