html5 javascript 小型计算器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>计算机</title>
</head>

<body>
   <input id="firstnumber" type="text" placeholder="请输入第一个值"/>
   <select id="choice" name="choice" >
   <option value=1>+</option>
   <option value=2>-</option>
   <option value=3>*</option>
   <option value=4>/</option>
   </select>
   <input id="secondnumber" type="text" placeholder="请输入第二个值"/>
   <input type="button" value="计算" onClick="show();"/>
   <label id="result"></label>

   <script type="text/javascript">
   function show(){
       var first = parseInt(document.getElementById("firstnumber").value);
       var second =parseInt(document.getElementById("secondnumber").value);
       var chioce = document.getElementById("choice");
       //可以获取下拉列表中选中的值
       var symbol = chioce.options[chioce.selectedIndex].text;
       var result;
       if(symbol=='+'){
          result = first+second;
      }    else if(symbol=='-'){
          result = first-second;
      }else if(symbol == '*'){
          result = first*second;
      }  else if(symbol == '/'){
          result = first/second;
      }
      //可以将值放入标签里面
      document.getElementById("result").innerHTML=result;        
   }
   </script>
</body>
</html>
效果图：
posted on 2016-07-07 16:02 王铭霞阅读(414) 评论(0) 编辑收藏举报