黑马程序员技术交流社区

标题: 用javascript实现一个简易计算器 [打印本页]

作者: 陈辉 时间: 2012-11-11 21:59
标题: 用javascript实现一个简易计算器
此计算器只有加、减、乘、除的功能，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>计算器</title>
<script type="text/javascript">
      function btnAdd() {
         //获得文本框中的值，并将其转换成十进制
         var Num1 = parseInt(document.getElementById("txt1").value, 10);
         var Num2 = parseInt(document.getElementById("txt2").value, 10);
         var Num3;
         var selectedcmb;//保存被选中的组合框
         var opers = document.getElementsByTagName("option");
         for (var i = 0; i < opers.length; i++) {
            //若组合框被选中,那么被选中的项的selected 属性就为true，就将当前对象存于selectedcmb中
            if (opers[i].selected == true) {
                  selectedcmb = opers[i];
            }
         }
         switch (selectedcmb.value) {
            case "+": Num3 = Num1 + Num2;
                  break;
            case "-": Num3 = Num1 - Num2;
                  break;
            case "*": Num3 = Num1 * Num2;
                  break;
            case "/": Num3 = Num1 / Num2;
                  break;

         }
         document.getElementById("txt3").value = Num3.toString();
      }
</script>
</head>
<body>
<input type="text" id="txt1" />

<select>
      <option id="add" value="+" >+</option>
      <option id="sub" value="-">-</option>
      <option id="mul" value="*">*</option>
      <option id="div" value="/">/</option>
</select>
<input type="text" id="txt2" />
<input type="button" value="=" id="btnAdd" />
<input type="text" id="txt3" />

</body>
</html>

作者: 许庭洲 时间: 2012-11-12 06:58
值得学习ing!

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2