计算器 html

最新推荐文章于 2024-09-16 08:47:17 发布

smkalen

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量417

点赞数

文章标签： button input function javascript border table

<html>
<head>
<title>calculator</title>
<style type="text/css">
   #blue{
    color:#0080FF;
    font:"宋体";
    font-size:12px;
    width:17%;
    height:30
   }
   #red{
    color:#EE3304;
    font:"宋体";
    font-size:12px;
    width:17%;
    height:30
   }
</style>
<script language="javascript">
   var interim;
   var sign = 0;
   var clearSign = 0;

   //此方法用来处理数字、“.”、“+/-”等按钮输入
   function display(x){
    if(clearSign == 0){
     text.value = "";
     clearSign = 1;
    }
    if(x == "."){
     if(text.value.indexOf(".")==-1){
      text.value = text.value+".";
     }
     if(text.value.indexOf(".")==0){
      text.value = 0 + text.value;
     }
    }
    else if(x == "+/-"){
     text.value = parseFloat(text.value) * -1;
    }
    else{
     if(text.value.indexOf(".")!=-1)
     {
      text.value = text.value+x;
     }
     else{
      text.value = parseFloat(text.value+x);
     }
    }
   }

   //加法
   function addition(){
    if(text.value != ""){
     interim = text.value;
     sign = 1;
     clearSign = 0;
    }
   }

   //减法
   function minus(){
    if(text.value != ""){
     interim = text.value;
     sign = 2;
     clearSign = 0;
    }
   }

   //乘法
   function multiply(){
    if(text.value != ""){
     interim = text.value;
     sign = 3;
     clearSign = 0;
    }
   }

   //除法
   function division(){
    if(text.value != ""){
     interim = text.value;
     sign = 4;
     clearSign = 0;
    }
   }


   //计算
   function calculate(){
    switch(sign){
     case 1:
      text.value = parseFloat(interim) + parseFloat(text.value);
      break;
     case 2:
      text.value = parseFloat(interim) - parseFloat(text.value);
      break;
     case 3:
      text.value = parseFloat(interim) * parseFloat(text.value);
      break;
     case 4:
      text.value = parseFloat(interim) / parseFloat(text.value);
      break;
    }
   }

   //求平方根
   function sqrtN(){
    text.value = Math.sqrt(text.value);
   }

   //倒数
   function reciprocal(){
    text.value = 1/text.value;
   }

   //退格
   function backspace(){
    text.value = text.value.substring(0,text.value.length-1);
   }
   //重置方法
   function reset(){
    interim = "";
    text.value = "";
    sign = 0;
   }
</script>
</head>
<body>
<br>
<table align="center" border="1" bgcolor="#CCCCCC" style="border-left-width:3px; border-left-color:#CCCCCC;
        border-bottom-width:3px; border-bottom-color:#CCCCCC">
   <tr>
    <td colspan="2"><input type="text" name="text" size="40" style="height:30; font-size:16px; text-align:right"></td>
   </tr>
   <tr>
    <td style="width:15%"></td>
    <td style="width:85%">
     <input type="button" name="backspace" value="Backspace" style="width:40%" id="red" onClick="backspace()">
     <input type="button" name="CE" value="CE" style="width:25%;" id="red">
     <input type="button" name="C" value="C" style="width:25%" id="red" onClick="reset()">
    </td>
   </tr>
   <tr>
    <td>
     <input type="button" name="MC" value="MC" style="width:100%;" id="red">
    </td>
    <td align="center">
     <input type="button" name="button7" value="7" id="blue" onClick="display(7)">
     <input type="button" name="button8" value="8" id="blue" onClick="display(8)">
     <input type="button" name="button9" value="9" id="blue" onClick="display(9)">
     <input type="button" name="division" value="/" id="red" onClick="division()">
     <input type="button" name="sqrt" value="sqrt" id="blue" onClick="sqrtN()" >
    </td>
   </tr>
   <tr>
    <td>
     <input type="button" name="MR" value="MR" style="width:100%;" id="red">
    </td>
    <td align="center">
     <input type="button" name="button4" value="4" id="blue" onClick="display(4)">
     <input type="button" name="button5" value="5" id="blue" onClick="display(5)">
     <input type="button" name="button6" value="6" id="blue" onClick="display(6)">
     <input type="button" name="multiply" value="*" id="red" onClick="multiply()">
     <input type="button" name="percentage" value="%" id="blue">
    </td>
   </tr>
   <tr>
    <td>
     <input type="button" name="MS" value="MS" style="width:100%;" id="red">
    </td>
    <td align="center">
     <input type="button" name="button1" value="1" id="blue" onClick="display(1)">
     <input type="button" name="button2" value="2" id="blue" onClick="display(2)">
     <input type="button" name="button3" value="3" id="blue" onClick="display(3)">
     <input type="button" name="minus" value="-" id="red" onClick="minus()">
     <input type="button" name="reciprocal" value="1/x" id="blue" onClick="reciprocal()">
    </td>
   </tr>
   <tr>
    <td>
     <input type="button" name="M+" value="M+" style="width:100%;" id="red">
    </td>
    <td align="center">
     <input type="button" name="button0" value="0" id="blue" onClick="display(0)">
     <input type="button" name="negative" value="+/-" id="blue" onClick="display('+/-')">
     <input type="button" name="decimal" value="." id="blue" onClick="display('.')">
     <input type="button" name="addition" value="+" id="red" onClick="addition()">
     <input type="button" name="calculate" value="=" id="blue" onClick="calculate()">
    </td>
   </tr>
</table>
</body>
</html>