JS网页计算器

最新推荐文章于 2023-02-06 11:31:05 发布

nceuaprsf

最新推荐文章于 2023-02-06 11:31:05 发布

阅读量819

点赞数

文章标签： css html javascript JS计算器网页计算器

本文链接：https://blog.csdn.net/aaron_si/article/details/24137991

版权

最近刚刚开始学习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>