编程练习

来源：互联网发布：梅雨知时节作品编辑：程序博客网时间：2024/05/22 07:07

要达到的结果：使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

提示：用JS取值的方法：var = document.getElementById(“id”）.value；

赋值的方法：document.getElementById(“id”）.value = 1；

思路：1.创建构建运算函数count();

2.用JS获取两个输入框及select下拉框的值

3.获取通过下拉框选择来的值来进行两个数加减乘除的运算（这里可以用switch来判断）

4.通过用onclick();函数来调用函数获取值

代码：

<!DOCTYPE html><html> <head>  <title> 事件</title>    <script type="text/javascript">   function count(){          var num1=document.getElementById('txt1').value;  var num2=document.getElementById('txt2').value;  var select=document.getElementById('select').value;  var result='';switch(select){     case '+':         result=parseFloat(num1)+parseFloat(num2);         break;    case '-':        result=parseFloat(num1)-parseFloat(num2);        break;    case '*':        result=parseFloat(num1)*parseFloat(num2);        break;    default:        result=parseFloat(num1)/parseFloat(num2);             }      document.getElementById('fruit').value=result;       }  </script>  </head>  <body>   <input type='text' id='txt1' />    <select id='select'><option value='+'>+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option>   </select>   <input type='text' id='txt2' />    <input type='button' value=' = ' onclick="count();"/> <!--通过 = 按钮来调用创建的函数，得到结果-->    <input type='text' id='fruit' />    </body></html>

0 0