纯JS写的计算器 -

xiaoxie

浏览: 34199 次
性别:
来自: 上海

最近访客更多访客>>

leimingchao

wggfxn

shallow_dream

gmxy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

纯JS写的计算器

博客分类：

最近工作比较轻松，无聊的时候自己尝试写了一个简单的计算器，还望各位指正以下为运行效果

<html>
  <head>
    <title>CalSelf.html</title>
	<style type="text/css">
	input {
	width: 50px;
    }
	</style>
	<script type="text/javascript">
	  var str=""
	  var num1;
	  var num2;
	  var opear;
      function num(no){
      str=str+no;
      document.getElementsByTagName("input")[0].value=str;
      }
      function Clear(){
      document.getElementsByTagName("input")[0].value="";
      str="";
      }
      //点击加减乘除事件
      function fun(op){
      //全局变量num1保存当前表框显示的数字内容
      num1=parseInt(document.getElementsByTagName("input")[0].value);
      //全局变量保存运算符加减乘除
      opear=op;
      if(op==1){//加
      op="+"
      }else if(op==2){//减
      op="-"
      }else if(op==3){//乘
      op="*"
      }else{//除
      op="/"
       }
      document.getElementsByTagName("input")[0].value=op;
      str="";
       }
       //按下等号下做的事件！
      function calculate(){
       var  result;
       num2=parseInt(document.getElementsByTagName("input")[0].value);
       if(opear==1){
       result=num1+num2
      }else if(opear==2){
       result=num1-num2
      }else if(opear==3){
       result=num1*num2
      }else{
       result=num1/num2
      }
      num2=result;
      document.getElementsByTagName("input")[0].value=result;
      }
	</script>
  </head>
  <body>
  <input type="text" style="width: 200px;">
  <table>
   <tr>
   <td><input type="button" value="1" onclick="num(1)"></td>
   <td><input type="button" value="2" onclick="num(2)"></td>
   <td><input type="button" value="3" onclick="num(3)"></td>
   <td><input type="button" value="+" onclick="fun(1)"></td>
   </tr>
   <tr>
   <td><input type="button" value="4" onclick="num(4)"></td>
   <td><input type="button" value="5" onclick="num(5)"></td>
   <td><input type="button" value="6" onclick="num(6)"></td>
   <td><input type="button" value="-" onclick="fun(2)"></td>
   </tr>
   <tr>
   <td><input type="button" value="7" onclick="num(7)"></td>
   <td><input type="button" value="8" onclick="num(8)"></td>
   <td><input type="button" value="9" onclick="num(9)"></td>
   <td><input type="button" value="*" onclick="fun(3)"></td>
   </tr>
   <tr>
   <td><input type="button" value="0" onclick="num(0)"></td>
   <td><input type="button" value="Clear" onclick="Clear()"></td>
   <td><input type="button" value="=" onclick="calculate()"></td>
   <td><input type="button" value="/" onclick="fun(4)"></td>
   </tr>
   </table> 
  </body>
</html>