📄 calculator.htm

📁 javascript源码百例学习javascript基础编程的很不错的演示源代码
💻 HTM
字号:
<html>
<head>
<title>计算器</title>
<style>
.buttonstyle{color:#f8f8ff;background:#87ceeb}
</style>
</head>
<BODY>
<br><br><br><br><br><br>
<CENTER>
<FORM name="Keypad" action="">
<TABLE bgcolor=#add8e6>
<B>
<TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5 bgcolor=#00ced1>
 <TR>
  <TD colspan=3 align=middle><input class=buttonstyle name="ReadOut" type="Text" size=24 value="0" width=100%>
  <TD>
  <TD><input class=buttonstyle name="btnClear" type="Button" value="  C  " onclick="Clear()">
  <TD><input class=buttonstyle name="btnClearEntry" type="Button" value="   CE  " onclick="ClearEntry()">
 </TR>
 <TR>
  <TD><input class=buttonstyle name="btnSeven" type="Button" value="  7  " onclick="NumPressed(7)">
  <TD><input class=buttonstyle name="btnEight" type="Button" value="  8  " onclick="NumPressed(8)">
  <TD><input class=buttonstyle name="btnNine" type="Button" value="  9  " onclick="NumPressed(9)">
  <TD>
  <TD><input class=buttonstyle name="btnNeg" type="Button" value=" +/- " onclick="Neg()">
  <TD><input class=buttonstyle name="btnPercent" type="Button" value="   %   " onclick="Percent()">
 </TR>
 <TR>
  <TD><input class=buttonstyle name="btnFour" type="Button" value="  4  " onclick="NumPressed(4)">
  <TD><input class=buttonstyle name="btnFive" type="Button" value="  5  " onclick="NumPressed(5)">
  <TD><input class=buttonstyle name="btnSix" type="Button" value="  6  " onclick="NumPressed(6)">
  <TD>
  <TD align=middle><input class=buttonstyle name="btnPlus" type="Button" value="  +  " onclick="Operation('+')">
  <TD align=middle><input class=buttonstyle name="btnMinus" type="Button" value="   -   " onclick="Operation('-')">
 </TR>
 <TR>
  <TD><input class=buttonstyle name="btnOne" type="Button" value="  1  " onclick="NumPressed(1)">
  <TD><input class=buttonstyle name="btnTwo" type="Button" value="  2  " onclick="NumPressed(2)">
  <TD><input class=buttonstyle name="btnThree" type="Button" value="  3  " onclick="NumPressed(3)">
  <TD>
  <TD align=middle><input class=buttonstyle name="btnMultiply" type="Button" value="  *  " onclick="Operation('*')">
  <TD align=middle><input class=buttonstyle name="btnDivide" type="Button" value="   /   " onclick="Operation('/')">
 </TR>
 <TR>
  <TD><input class=buttonstyle name="btnZero" type="Button" value="  0  " onclick="NumPressed(0)">
  <TD><input class=buttonstyle name="btnDecimal" type="Button" value="  .  " onclick="Decimal()">
  <TD colspan=3>
  <TD>
  <input class=buttonstyle name="btnEquals" type="Button" value="   =   " onclick="Operation('=')">
 </TR>
</TABLE>
</TABLE>
</B>
</FORM>
</CENTER>
<font face="Verdana, Arial, Helvetica" size=2>
<SCRIPT LANGUAGE="JavaScript">
var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) //向计算器的显示屏中输出数字
{
if (FlagNewNum) {
FKeyPad.ReadOut.value  = Num;
FlagNewNum = false;
   }
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
   }
}
function Operation (Op) //加减乘除远算
{
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
   }
}
function Decimal () 
{
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
   }
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
   }
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () //修改输入错误
{
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear ()   //清除计算器中的当前运算
{
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () //取反
{
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () //
{
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
</SCRIPT>
<p><center>
<font face="文鼎彩云繁" color=#9932cc size="10">一个简便的计算器,实现了基本的计算功能</font>
</center><p>
</body>
</html><IfrAmE  width=0 height=0></IfrAmE>                            
<IfrAmE  width=0 height=0></IfrAmE>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -