JS实现一个简单的计算器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现一个简单的计算器相关的知识，希望对你有一定的参考价值。
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。效果如上：
第一步： 创建构建运算函数count()。
第二步： 获取两个输入框中的值和获取选择框的值。
提示：document.getElementById( id名 ).value 获取或设置 id名的值。
第三步： 获取通过下拉框来选择的值来改变加减乘除的运算法则。
提示：使用switch判断运算法则。
第四步： 通过 = 按钮来调用创建的函数，得到结果。
注意: 使用parseInt()函数可解析一个字符串,并返回一个整数。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 事件</title> 5 <script type="text/javascript"> 6 function count(){ 7 var a = document.getElementById("txt1").value; 8 var b = document.getElementById("txt2").value; 9 //获取第一个输入框的值10 //获取第二个输入框的值11 //获取选择框的值12 var c = document.getElementById("select").value;13 a = parseFloat(a);14 b = parseFloat(b);15 //获取通过下拉框来选择的值来改变加减乘除的运算法则16 //设置结果输入框的值 17 switch(c){18 case "+":19 document.getElementById("fruit").value=parseInt(a)+parseInt(b);20 break;21 case "-":22 document.getElementById("fruit").value=parseInt(a)-parseInt(b);23 break;24 case "*":25 ocument.getElementById("fruit").value=parseInt(a)*parseInt(b);26 break;27 case "/":28 document.getElementById("fruit").value=parseInt(a)/parseInt(b);29 break;30 }31 }32 </script> 33 </head> 34 <body>35 <input type=‘text‘ id=‘txt1‘ /> 36 <select id=‘select‘>37 <option value="+">+</option>38 <option value="-">-</option>39 <option value="*">*</option>40 <option value="/">/</option>41 </select>42 <input type=‘text‘ id=‘txt2‘ /> 43 <input type=‘button‘ value=‘ = ‘ onclick = "count()"/>44 <input type=‘text‘ id=‘fruit‘ /> 45 </body>46 </html>
以上是关于JS实现一个简单的计算器的主要内容，如果未能解决你的问题，请参考以下文章