Web第三周-Web前端利用Js实现简单计算器功能

最新推荐文章于 2024-03-23 13:21:38 发布

时光已旧

最新推荐文章于 2024-03-23 13:21:38 发布

阅读量1.9k

点赞数 2

文章标签：前端 web web前端 javascript

本文链接：https://blog.csdn.net/gydarkfire/article/details/48310869

版权

Web前端计算器的初步实现。

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>计算器</title>  
<script>  
var init="";  
var lastop="";  
var num1=0;  
var num2=0;  
var rs=0;  
function display(state){  
    init+=state;  
    show(init);   
}  
function show(str){  
    document.getElementById("input").value=str;  
}  
function getOp(op){  
    lastop=op;  
    num1=parseFloat(init);  
    init="";      
}  
function getResult(){  
    num2=parseFloat(init);  
    init="";      
    rs=cal(num1,num2,lastop);  
    show(rs);  
}  
function fan(){  
    init=String((parseFloat(document.getElementById("input").value)*(-1)));  
    document.getElementById("input").value=init;  
}     
function cal(n1,n2,ope){  
     switch(ope){  
        case '+': return(n1+n2);break;  
        case '-': return(n1-n2);break;  
        case '*': return(n1*n2);break;  
        case '/': if(n2!=0){ return(n1/n2); break;}  
                  else{ break;}  
        case '%': return(n1%n2);break;  
                  }  
          
    }  
function ce(){  
      var size=init.length;  
      initinit=init.substring(0,size-1);  
      document.getElementById("input").value=init;  
}  
function clean(){  
    init="";  
    lastop="";  
    num1=0;  
    num2=0;  
    rs=0;  
    document.getElementById("input").value="0.";  
}  
  
</script>  
</head>  
  
<body >  
<h1  align="center" style="font-family:楷体; color:#999999; ">网页计算器</h1>  
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"  >  
  <table width="669" height="127" border="1" align="center">  
    <tr>  
      <td  align="center" colspan="3"><label for="input"></label>  
      <input type="text" name="input"  width="200%" id="input"  value="0."/></td>  
      <td align="center"><input type="button" name="C" id="C" value="    C    "  οnclick="clean()"/></td>  
      <td align="center"><input   type="button" name="CE" id="CE" value="  CE  " οnclick="ce()"/></td>  
    </tr>  
    <tr>  
      <td align="center"><input type="button" name="seven" id="seven" value="    7    "  οnclick="display('7')"/></td>  
      <td align="center"><input type="button" name="eight" id="eight" value="    8    " οnclick="display('8')" /></td>  
      <td align="center"><input type="button" name="nine" id="nine" value="    9    " οnclick="display('9')" /></td>  
      <td align="center"><input type="button" name="+/-" id="+/-" value="   +/-   " οnclick="fan()"/></td>  
      <td align="center"><input type="button" name="%" id="%" value="   %   " οnclick="getOp('%')"/></td>  
    </tr>  
    <tr>  
      <td align="center"><input type="button" name="four" id="four" value="    4    "  οnclick="display('4')" /></td>  
      <td align="center"><input type="button" name="five" id="five" value="    5    " οnclick="display('5')" /></td>  
      <td align="center"><input type="button" name="six" id="six" value="    6    " οnclick="display('6')" /></td>  
      <td align="center"><input type="button" name="+" id="+" value="    +    " οnclick="getOp('+')" /></td>  
      <td align="center" ><input type="button" name="-" id="-" value="    -    "  οnclick="getOp('-')" /></td>  
    </tr>  
    <tr>  
      <td align="center"><input type="button" name="one" id="one" value="    1    " οnclick="display('1')" /></td>  
      <td align="center"><input type="button" name="two" id="two" value="    2    " οnclick="display('2')" /></td>  
      <td align="center"><input type="button" name="three" id="three" value="    3    "  οnclick="display('3')"/></td>  
      <td align="center"><input type="button" name="*" id="*" value="    *    "   οnclick="getOp('*')" /></td>  
      <td align="center"><input type="button" name="/" id="/" value="    /    "   οnclick="getOp('/')"  /></td>  
    </tr>  
    <tr>  
      <td align="center"><input type="button" name="zero" id="zero" value="    0    " οnclick="display('0')" /></td>  
      <td align="center"><input type="button" name="dot" id="dot" value="    .    "  οnclick="display('.')"/></td>  
      <td align="center"> </td>  
      <td align="center"><input type="button" name="=" id="=" value="    =    " οnclick="getResult()" /></td>  
      <td align="center"><input type="button" name="return" id="return" value="  返回  " /></td>  
    </tr>  
  </table>  
</form>  
</body>  
</html>

时光已旧

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Web第三周-Web前端利用Js实现简单计算器功能

Web前端计算器的初步实现。计算器 var init=""; var lastop=""; var num1=0; var num2=0; var rs=0; function display(state){ init+=state; show(init); } function show(str){
复制链接

扫一扫