JavaScript制作标准计算器

最新推荐文章于 2021-05-17 15:51:58 发布

yangfei_net

最新推荐文章于 2021-05-17 15:51:58 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript button function xhtml input border

本文链接：https://blog.youkuaiyun.com/yangfei_blog/article/details/7326264

本文将介绍如何使用JavaScript创建一个基础的计算器应用，包括输入、运算、清除和使用数学函数等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 计算器

昨天由于一些客观事情没能及时发布，今天把它发布出来

这是一个使用JavaScript制作的一个简易计算器，实现计算器的基础功能！

<!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=utf-8" />
<title>JavaScript计算器</title>
</head>

<script language="JavaScript">
var baseoper;
var digitstate;
var num1;
var operstate;

function setStartState()
{
     digitstate="beempty";
     num1=0;
     baseoper="beempty";
     operstate=false;

}
function add(i)
{
     if(operstate)
     {
        cal.total.value=i;
        operstate=false;
     }
     else
     {
         if(cal.total.value=="0")
         {
             cal.total.value=i;
             digistate="bein";
         }
         else
         cal.total.value+=i;
     }
}
function cleartext()
{
     cal.total.value="0";
     digitstate="beempty";
     basestate="beempty"
}

function count()
{
     if(baseoper!="beempty")
     {
         switch(baseoper)
         {
             case"+":
             num1=parseFloat(num1)+parseFloat(cal.total.value);
             break;
             case"-":
             num1=parseFloat(num1)-parseFloat(cal.total.value);
             break;
             case"*":
             num1=parseFloat(num1)*parseFloat(cal.total.value);
             break;
             case"/":
             num1=parseFloat(num1)/parseFloat(cal.total.value);
             break;
         }
         preoper=true;
         cal.total.value=num1;
     }
     baseoper="beempty";
}
function useFunc(func)
{
     switch(func)
     {
         case"sin":
         cal.total.value=Math.sin(cal.total.value);
         break;
         case"cos":
         cal.total.value=Math.cos(cal.total.value);
         break;
         case"asin":
         cal.total.value=Math.asin(cal.total.value);
         break;
         case"acos":
         cal.total.value=Math.acos(cal.total.value);
         break;
         case"tan":
         cal.total.value=Math.tan(cal.total.value);
         break;
         case"atan":
         cal.total.value=Math.atan(cal.total.value);
         break;
         case"log":
         cal.total.value=Math.log(cal.total.value);
         break;
         case"exp":
         cal.total.value=Math.exp(cal.total.value);
         break;
         case"sqrt":
         cal.total.value=Math.sqrt(cal.total.value);
         break;
         case"1/x":
         cal.total.value=1/cal.total.value;
         break;
     }
     operstate=true;
}
function addPoint()
{
     if(digitstate=="bein"||digitstate=="beempty")
     {
         cal.total.value+=".";
         digistate="befloat";
     }
}
function setOper(oper)
{
     operstate=true;
     if(baseoper=="beempty")
     {
      num1=0+cal.total.value;
      baseoper=oper;
     }
     else
     {
       count();
       baseoper=oper;
     }
}

         </script>
<body onload="setStartState()">
<font size=6> JavaScript计算器</font>
　                                              
<form name="cal">
<table border="5" align="left" bordercolor="#FFCCFF">
<tr align="center">
<td colspan="6">
<input type="Text" name="total" size="25" value="0">
</td>
</tr>

<tr align="center">
<td><input type="Button" value="sin" onclick="useFunc('sin')"></td>
<td><input type="Button" value="cos" onclick="useFunc('cos')"></td>
<td><input type="Button" value="1" onclick="add('1')"></td>
<td><input type="Button" value="2" onclick="add('2')"></td>
<td><input type="Button" value="3" onclick="add('3')"></td>
<td><input type="Button" value="+" onclick="setOper('+')"></td>
</tr>

<tr align="center">
<td><input type="Button" value="asin" onclick="useFunc('asin')"></td>
<td><input type="Button" value="acos" onclick="useFunc('acos')"></td>
<td><input type="Button" value="4" onclick="add('4')"></td>
<td><input type="Button" value="5" onclick="add('5')"></td>
<td><input type="Button" value="6" onclick="add('6')"></td>
<td><input type="Button" value="-" onclick="setOper('-')"></td>
</tr>

<tr align="center">
<td><input type="Button" value="tan" onclick="useFunc('tan')"></td>
<td><input type="Button" value="atan" onclick="useFunc('atan')"></td>
<td><input type="Button" value="7" onclick="add('7')"></td>
<td><input type="Button" value="8" onclick="add('8')"></td>
<td><input type="Button" value="9" onclick="add('9')"></td>
<td><input type="Button" value="*" onclick="setOper('*')"></td>
</tr>

<tr align="center">
<td><input type="Button" value="log" onclick="useFunc('log')"></td>
<td><input type="Button" value="exp" onclick="useFunc('exp')"></td>
<td><input type="Button" value="0" onclick="add('0')"></td>
<td><input type="Button" value="." onclick="addPoint()"></td>
<td><input type="Button" value="=" onclick="count()"></td>
<td><input type="Button" value="/" onclick="setOper('/')"></td>
</tr>

<tr align="center">
<td><input type="Button" value="sqrt" onclick="useFunc('sqrt')">
<td><input type="Button" value="1/x" onclick="useFunc('1/x')">
<td><input type="Button" value="pi" onclick="cal.total.value=Math.PI"></td>
<td><input type="Button" value="E" onclick="cal.total.value=Math.E"></td>
<td colspan=2><input type="Button" value="清除" onclick="cleartext()"></td>
</tr>

</table>
</form>
</body>
</html>