您的位置：首页 > Web前端 > JavaScript

用Javascript写简单计算器

2009-02-19 19:12 260 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航