本文介绍如何使用JavaScript和HTML构建一个简易计算器。通过获取两个输入框的数值，利用switch语句处理加减乘除四种运算逻辑，并将结果输出至指定文本框。
JavaScript实现基础加减乘除计算器
以下示例展示了使用JavaScript编写简易计算器的具体实现方式，供读者参考。
计算器界面设计
设计一个具备基础运算功能的计算器界面。
核心代码实现
具体实现代码。
<body>
<a>第一个数</a>
<input type="test" id="inputId1" value="" /><br/>
<a>第二个数</a>
<input type="test" id="inputId2" value="" /><br/>
<button onclick="cal('+')">+</button>
<button onclick="cal('-')">-</button>
<button onclick="cal('*')">*</button>
<button onclick="cal('/')">/</button><br/>
<a>计算结果</a>
<input type="test" id="resultId" value="" />
<script type="text/javascript">
// function add() {
// console.log('add');
// var inputObj1 = document.getElementById('inputId1');
// var inputObj2 = document.getElementById('inputId2');
// var result = parseInt(inputObj1.value) + parseInt(inputObj2.value);
// var resultObj = document.getElementById('result');
// resultObj.value = result;
// console.log(result);
// }
function cal(type) {
var inputObj1 = document.getElementById('inputId1');
var inputObj2 = document.getElementById('inputId2');
switch(type){
case '+':
var result = parseInt(inputObj1.value) + parseInt(inputObj2.value);
break;
case '-':
var result = parseInt(inputObj1.value) - parseInt(inputObj2.value);
break;
case '*':
var result = parseInt(inputObj1.value) * parseInt(inputObj2.value);
break;
case '/':
var result = parseInt(inputObj1.value) / parseInt(inputObj2.value);
break;
}
var resultObj = document.getElementById('resultId');
resultObj.value = result;
}
</script>
</body>
</html>总结
以上内容为本文的全部分享，希望能为读者的学习提供便利，同时也欢迎继续支持本站。