编程练习
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；
任务
第一步： 创建构建运算函数count()。
第二步： 获取两个输入框中的值和获取选择框的值。
提示：document.getElementById( id名 ).value 获取或设置 id名的值。
第三步： 获取通过下拉框来选择的值来改变加减乘除的运算法则。
提示：使用switch判断运算法则。
第四步： 通过 = 按钮来调用创建的函数，得到结果。
注意: 使用parseInt()函数可解析一个字符串,并返回一个整数。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>计算器</title> 6 <script type="text/javascript"> 7 function count(){ 8 var sum=''; 9 var str1=parseInt(document.getElementById('txt1').value); 10 //获取第一个输入框的值 11 var str2=parseInt(document.getElementById('txt2').value); 12 //获取第二个输入框的值 13 var ch=document.getElementById('select').value; //获取选择框的值 14 switch(ch){ //获取通过下拉框来选择的值来改变加减乘除的运算法则 15 case "+": sum = str1 + str2; break; 16 case "-": sum = str1 - str2; break; 17 case "*": sum = str1 * str2; break; 18 case "/": sum = str1 / str2; break; 19 } 20 document.getElementById("fruit").value=sum; //设置结果输入框的值 21 } 22 </script> 23 </head> 24 <body> 25 <input type='text' id='txt1' /> 26 <select id='select'> 27 <option value='+'>+</option> 28 <option value="-">-</option> 29 <option value="*">*</option> 30 <option value="/">/</option> 31 </select> 32 <input type='text' id='txt2' /> 33 <input type='button' value=' = ' onclick="count()" /> 34 <input type ='text' id='fruit' /> 35 </body> 36 </html>