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

用js实现简易计算器(只能实现加减乘除)

2009-10-12 11:29 267 查看
<mce:script type="text/javascript"><!--
function operation(flag)
{
fl = flag;
switch(flag)
{
case "+":
doAdd();break;
case "-":
doMinus();break;
case "*":
doMultiply();break;
case "/":
doDivide();break;
}
}
var num1;
var num2;
var isPass = true;
var result;

var fl;
function getValue()
{
isPass  =true;
num1 =document.getElementById("txtNum1").value;
num2 = document.getElementById("txtNum2").value;
result = document.getElementById("txtResult");
checkVal();
}
function checkVal()
{
if(num1=="" || num2=="")
{
alert("不能为空");
isPass =  false;
}else
{
if(num1!=0)
{
if(!Number(num1))
{
isPass = false;
}
}
if(fl=="/")
{
if(num2 == 0)
{
alert("除数不能为0");
isPass = false;
}
}
if(fl!="/"){
if(num2!=0){
if(!Number(num2))
{
alert("请输入数字");
isPass = false;
}
}
}

}

}
//加法
function doAdd()
{
getValue();
if(isPass)
{
result.value =Number(num1)+Number(num2);
}
}
//减法
function doMinus()
{
getValue();
if(isPass)
{
result.value =Number(num1)-Number(num2);
}
}
//乘法
function doMultiply(){
getValue();
if(isPass)
{
result.value =Number(num1)*Number(num2);
}
}
//除法
function doDivide(){
getValue();
if(isPass)
{
result.value =Number(num1)/Number(num2);
}
}
function clearValue()
{
document.getElementById("txtNum1").value = "";
document.getElementById("txtNum2").value = "";
document.getElementById("txtResult").value = "";
}

// --></mce:script>


<div style="z-index: 101; left: 134px; position: absolute; top: 55px; height: 98px">
<table style="width: 80%; height: 92px">
<tr>
<td colspan="3" style="background-image: url(images/logo.gif); background-repeat: no-repeat;
height: 37px; padding-left: 230px;">
欢迎您来到淘宝!</td>
</tr>
<tr style="background-color: #33cccc;" mce_style="background-color: #33cccc;">
<td style="background-image: url(images/shop.gif); width: 111px; background-repeat: no-repeat;
height: 61px;">
</td>
<td colspan="2" style="height: 61px">
购物简易计算器</td>
</tr>
<tr style="background-color: #33cccc;" mce_style="background-color: #33cccc;">
<td style="width: 111px">
第一个数:</td>
<td colspan="2">
<input id="txtNum1" type="text" /></td>
</tr>
<tr style="background-color: #33cccc;" mce_style="background-color: #33cccc;">
<td style="width: 111px">
第二个数:</td>
<td colspan="2">
<input id="txtNum2" type="text" /></td>
</tr>
<tr style="background-color: #33cccc;" mce_style="background-color: #33cccc;">
<td colspan="3" style="height: 26px">
<input id="btnAdd" style="width: 63px" type="button" value="+" onclick="operation('+');" />
<input id="btnMinus" style="width: 63px" type="button" value="-" onclick="operation('-');" />
<input id="btnMultiply" style="width: 63px" type="button" value="*" onclick="operation('*');" />
<input id="btnDivide" style="width: 63px" type="button" value="/" onclick="operation('/');" />
<input id="btnClear" type="button" style="width: 63px" value="清空" onclick="clearValue();" /></td>
</tr>
<tr style="background-color: #33cccc;" mce_style="background-color: #33cccc;">
<td colspan="3" style="height: 26px">
计算结果:<input id="txtResult" readonly="readonly" type="text" /></td>
</tr>
</table>
</div>


有什么好的建议或问题还请各位朋友指出,谢谢。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: