ホームページ > 記事 > ウェブフロントエンド > JSで電卓関数を実装する最も簡単な方法
JSで電卓関数を実装する最も簡単な方法
- php中世界最好的语言オリジナル
- 2018-04-13 17:10:262243ブラウズ
今回はJSで電卓機能を実装する最も簡単な方法をお届けします。 具体的なコード:
<!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>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
JS のランダムにソートされた配列 vue のコンポーネントとフレームワーク構造の選択方法以上がJSで電卓関数を実装する最も簡単な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JSで配列をランダムに並べ替える次の記事：JSで配列をランダムに並べ替える