最近刚刚开始学习HTML/CSS/JS,打算编一个网页计算器,编好后也发现一些漏洞,如何:我发现计算出一个结果后不能直接继续加减乘除运算,算出一个结果后想算下一个数,直接按下一个数会有错误,必须先清除结果。最后问题还是解决了。不过页面还是很需要改进的,后续还会用CSS继续改进。
-----------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS网页计算器</title>
<script type="text/javascript">
var number="" ,number2,a,result=""
function input(n)
{result=""
number=number+n
document.myform.mytext.value=number
}
function myclear(n)
{result=""
number=""
number2=""
document.myform.mytext.value=number
}
function plus()
{a=1
if(result!="")
{number=result
result=""}
number2=number
number=""
}
function minus()
{a=2
if(result!="")
{number=result
result=""}
number2=number
number=""
}
function times()
{a=3
if(result!="")
{number=result
result=""}
number2=number
number=""
}
function divide()
{a=4
if(result!="")
{number=result
result=""}
number2=number
number=""
}
function point()
{
number=number+"."
}
function precent()
{
number=parseFloat(number)*0.01
document.myform.mytext.value=number
number=""
}
function reciprocal()
{
number=1/parseFloat(number)
document.myform.mytext.value=number
number=""
}
function sign()
{
number=parseFloat(number)*(-1)
document.myform.mytext.value=number
}
function backspace()
{
document.myform.mytext.value=document.myform.mytext.value.slice(0,-1)
number=document.myform.mytext.value
}
function ce(n)
{result=""
number=""
document.myform.mytext.value=number
}
function radical()
{
number=Math.sqrt(parseFloat(number))
document.myform.mytext.value=number
}
function equal()
{
if(a==1)
{result=parseFloat(number)+parseFloat(number2)
document.myform.mytext.value=result
number=""
}
if(a==2)
{result=parseFloat(number)*(-1)+parseFloat(number2)
document.myform.mytext.value=result
number=""
}
if(a==3)
{result=parseFloat(number)*parseFloat(number2)
document.myform.mytext.value=result
number=""
}
if(a==4)
{result=parseFloat(number2)*(1/parseFloat(number))
document.myform.mytext.value=result
number=""
}
}
</script>
<style type="text/css">
input {font:华文细黑; font-weight:700; color:#0033CC;}
</style>
</head>
<body background="2012052412255329.jpg">
<form name="myform">
<table border="5" style="border-color: #FFFFFF" align="center" cellpadding="0" cellspacing="0" background="2012052412255329.jpg" >
<tr align="center" valign="middle">
<th height="40" colspan="5"><input type="text" style="width:300px; height:75px; font-size:20px;"" name="mytext" value="JS网页计算器" /></th>
</tr>
<tr>
<th width="64" height="69" align="center" valign="middle" ><input name="button" type="button" value="←" οnclick="backspace()" style="height:40px; width:50px;" /></th>
<th width="50"><input name="button" type="button" value="CE" οnclick="ce()" style="height:40px; width:50px; font:华文细黑; font-weight:700;" /></th>
<th width="54"><input name="button" type="button" value="C" οnclick="myclear()" style="height:40px; width:50px;" /></th>
<th width="54"><input name="button" type="button" value="±" οnclick="sign()" style="height:40px; width:50px;" /></th>
<th width="50"><input name="button" type="button" value="√" οnclick="radical()" style="height:40px; width:50px;" /></th>
</tr>
<tr >
<th width="64" height="60" align="center" valign="middle">
<input name="button" type="button" value="1" οnclick="input(value)"style="height:40px; width:50px;" /></th>
<th><input name="button" type="button" value="2" οnclick="input(value)" style="height:40px; width:50px;" /></th>
<th><input name="button" type="button" value="3" οnclick="input(value)"style="height:40px; width:50px;" /></th>
<th ><input name="button" type="button" value="/" οnclick="divide()" style="height:40px; width:50px;" /></th>
<th><input name="button" type="button" value="%" οnclick="precent()" style="height:40px; width:50px;" /></th>
</tr>
<tr>
<th width="64" height="62" align="center" valign="middle"><input name="button" type="button" value="4" οnclick="input(value)" style="height:40px; width:50px;"/></th>
<th><input name="button" type="button" value="5" οnclick="input(value)" style="height:40px; width:50px;" /></th>
<th><input name="button" type="button" value="6"οnclick="input(value)" style="height:40px; width:50px;" /></th>
<th "><input name="button" type="button" value="×" οnclick="times()" style="height:40px; width:50px;" /></th>
<th><input name="button" type="button" value="1/x" οnclick="reciprocal()" style="height:40px; width:50px;" /></th>
</tr>
<tr>
<th width="64" height="59" align="center" valign="middle">
<input name="button" style="height:40px; width:50px;" type="button" value="7" οnclick="input(value)" /></th>
<th><input name="button" type="button" value="8" οnclick="input(value)" style="height:40px; width:50px;" /></th>
<th><input name="button" type="button" value="9" οnclick="input(value)" style="height:40px; width:50px;" /></th>
<th ><input name="button" type="button" value="-" οnclick="minus()" style="height:40px; width:50px;" /></th>
<th rowspan="2"><input name="button" type="button" value="=" οnclick="equal()" style="height:120px; width:50px;" /></th>
</tr>
<tr>
<th height="40" colspan="2" align="center" valign="middle"><input name="button" type="button" value="0"οnclick="input(value)" style="height:40px; width:120px;" /></th>
<th><input name="button" type="button" value="." οnclick="point()" style="height:40px; width:50px;" /></th>
<th ><input name="button" type="button" value="+" οnclick="plus()" style="height:40px; width:50px;" /></th>
</tr>
</table>
</form>
</body>
</html>