使用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>