用Javascript写简单计算器

最新推荐文章于 2024-09-11 15:33:18 发布

luminhua6666

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量1.3k

点赞数 1

文章标签： javascript button class input function border

本文链接：https://blog.csdn.net/luminhua6666/article/details/3911330

版权

<html>
<head>
<title>
文本相关标记的应用</title>
<style type="text/css">
.bgcolor
{
background-color:#CCCCCC
}

</style>
<script language="javascript">
var total =0;
var flagNew=false;//是否是新增的数字
var operation="";//以id 号来确定用户输入的运算符

//获取用户输入的运算符
function Operation(ope)
{
   var ShowOut=document.getElementById("count").value;
   if(flagNew && operation != "=");
   else
    {
       flagNew = true;
       if ( '+' == operation )
       {
      total = parseFloat(total) + parseFloat(ShowOut);
   //alert(total)
    }
       else if ( '-' == operation )
       {
      total -= ShowOut;
    }
       else if ( '/' == operation )
       {
      total /= ShowOut;
    }
       else if ( '*' == operation )
       {
      total *= ShowOut;
     }
       else
       {
      total =ShowOut;
  }
       document.getElementById("count").value = total;
       operation = ope;
   }
}

//获取用户按按钮的值
function GetInValue(num)
{
   if(flagNew)
     {
     document.getElementById("count").value=num;
     flagNew=false;
}
   else
      {
      if( document.getElementById("count").value==0)
      {
        document.getElementById("count").value=num;
      }
     else
        {
       document.getElementById("count").value +=num;
     }
   }
//total=document.getElementById("count").value;
}

//清零设置
function ClearEmpty ()
{
document.getElementById("count").value = "0";
flagNew = true;
}
</script>

</head>
<body text="#000000" bgcolor="FFFFFF">
<table width="222" height="40" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="4" width="300" height="16" ><input type="text" id="count" value="" width="300" height="16" align="middle"/> </td>
</tr>
<tr>
    <td ><input type="button" id="7" width="35" height="15" value="7" class="bgcolor" onClick="GetInValue(7)" /> </td>
    <td ><input type="button" id="8" value="8" width="35" height="15" class="bgcolor" onClick="GetInValue(8)"/> </td>
    <td ><input type="button" id="9" value="9" width="35" height="15" class="bgcolor" onClick="GetInValue(9)"/> </td>
    <td ><input type="button" id="+" value="+" width="35" height="15" class="bgcolor" onClick="Operation('+')"/> </td>
</tr>
<tr>
    <td><input type="button" id="4" value="4" width="35" height="15" class="bgcolor" onClick="GetInValue(4)"/> </td>
    <td><input type="button" id="5" value="5" width="35" height="15" class="bgcolor" onClick="GetInValue(5)"/> </td>
    <td><input type="button" id="6" value="6" width="35" height="15" class="bgcolor" onClick="GetInValue(6)"/> </td>
    <td><input type="button" id="-" value="-" width="35" height="15" class="bgcolor" onClick="Operation('-')"/> </td>
</tr>
<tr>
    <td><input type="button" id="1" value="1" width="35" height="15" class="bgcolor" onClick="GetInValue(1)"/> </td>
    <td><input type="button" id="2" value="2" width="35" height="15" class="bgcolor" onClick="GetInValue(2)"/> </td>
    <td><input type="button" id="3" value="3" width="35" height="15" class="bgcolor" onClick="GetInValue(3)"/> </td>
    <td><input type="button" id="*" value="*" width="35" height="15" class="bgcolor" onClick="Operation('*')"/> </td>
</tr>
<tr>
    <td><input type="button" id="0" value="0" width="35" height="15" class="bgcolor" onClick="GetInValue(0)"/> </td>
    <td><input type="button" id="c" value="c" width="35" height="15" class="bgcolor" onClick="ClearEmpty () "/> </td>
    <td><input type="button" id="/" value="/" width="35" height="15" class="bgcolor" onClick="Operation('/')"/> </td>
    <td><input type="button" id="=" value="=" width="35" height="15" class="bgcolor" onClick="Operation('=')"/> </td>
</tr>
</table>

</body>
</html>

luminhua6666

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
用Javascript写简单计算器

文本相关标记的应用.bgcolor{background-color:#CCCCCC}var total =0;var flagNew=false;//是否是新增的数字var operation="";//以id 号来确定用户输入的运算符//获取用户输入的运算符 function Operation(ope){ var ShowOut=document.getElementById("
复制链接

扫一扫