Js简易计算器主要是通过获取Dom节点,对其进行操作。
主要功能:加减乘除运算,然后可以清零
具体代码如下:
Calculator.html
<body>
<div id="box">
<div class="title">Calculator</div>
<input type="text" id="num1" placeholder="请输入第一个数字"/>
<p><select id="operator">
<!-- 默认为'+'' -->
<option checked="checked">+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select></p>
<p>
<!-- placeholder用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。
该提示会在用户输入值之前显示在输入字段中
适用于以下输入类型:text、search、url、tel、email 以及 password。-->
<input type="text" id="num2" placeholder="请输入第二个数字"/>
</p>
<p>
<input type="button" value="=" onclick="calculate();" />
</p>
<input type="text" id="result" placeholder="结果" />
<input type="button" value="C" onclick="boxReset();" />
</div>
</body>
Calculator.js
//主要实现获取两个数字和运算符,然后进行相应的计算
function calculate(){
var num1 = Number(document.getElementById('num1').value);
var operator =document.getElementById('operator').value;
var num2 = Number(document.getElementById('num2').value);
var result = document.getElementById('result');
switch(operator){
case '+' : result.value = num1 + num2;break;
case '-' : result.value = num1 - num2;break;
case '*' : result.value = num1 * num2;break;
case '/' : result.value = num1 / num2;break;
}
// value和innerText都可以使用
}
//将所有数值清零
function boxReset(){
document.getElementById('num1').value = '';
document.getElementById('operator').value = '+';
document.getElementById('num2').value = '';
document.getElementById('result').value = '';
}
最终结果如图:
下拉框可以选择运算符,按钮C进行清零