搜索
您的当前位置：首页正文

用JS编写一款计算器

来源：步旅网

摘要

本文主要用到的是JavaScript中的Math对象，对计算结果未做深入考究，仅探索一种实现思路。

<html>
 <head> 
  <script language="JavaScript">
function doit() {
    form.input.value = eval(form.input.value)
}
function Cos() {
    x = form.input.value
    if (x == '') alert('Error: Input Required');
    else form.input.value = Math.cos(x);
}
function Sin() {
    x = form.input.value
    if (x == '') alert('Error: Input Required');
    else form.input.value = Math.sin(x);
}
function Ln() {
    x = form.input.value
    if (x == '') alert('Error: Input Required');
    else form.input.value = Math.log(x);
}
function Root() {
    x = form.input.value
    if (x == '') alert('Error: Input Required');
    else form.input.value = Math.sqrt(x);
}
function Tan() {
    x = form.input.value
    if (x == '') alert('Error: Input Required');
    else form.input.value = Math.tan(x);
}
function Icos() {
    x = form.input.value
    if (x == '') alert('Error: Input Required');
    else form.input.value = Math.acos(x);
}
function Isin() {
    x = form.input.value
    if (x == '') alert('Error: Input Required');
    else form.input.value = Math.asin(x);
}
function Itan() {
    x = form.input.value
    if (x == '') alert('Error: Input Required');
    else form.input.value = Math.atan(x);
}
function Round() {
    x = form.input.value
    if (x == '') alert('Error: Input Required');
    else form.input.value = Math.round(x);
}
function Ran() {
    x = form.input.value form.input.value = Math.random(x);
}
function Neg() {
    x = form.input.value
    if (x == '') alert('Error: Input Required');
    else x = parseFloat(x) * -1;
}
function del() {
    x = form.input.value x = (x.substring) - 1
}//  End -->
</script> 
  <title>计算器</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 
 </head> 
 <body onload="document.form.input.focus()"> 
  <div align="center"> 
   <form name="form" method="post" action="javascript:doit()"> 
    <table width="260" border="0" height="260" align="center" bordercolor="#0000FF" bgcolor="#0000FF"> 
     <tbody> 
      <tr bgcolor="#FF0000"> 
       <td colspan="7" height="2"> 
        <div align="center"> 
         <b><font face="Arial, Helvetica, sans-serif" color="#FFFFFF">科学计算器</font></b> 
        </div> </td> 
      </tr> 
      <tr bgcolor="#00FFFF"> 
       <td colspan="7" height="2"> 
        <div align="center"> 
         <input type="text" name="input" size="40" /> 
        </div> </td> 
      </tr> 
      <tr bgcolor="#000000"> 
       <td width="50" height="4"> <input type="button" name="one" value="1" onclick="form.input.value += '1'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="4"> <input type="button" name="two" value="2" onclick="form.input.value += '2'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="4"> <input type="button" name="three" value="3" onclick="form.input.value += '3'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="20" height="4"> </td> 
       <td width="50" height="4"> <input type="button" name="clear" value="C" onclick="form.input.value = ''" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #9F0004; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="4"> <input type="button" name="percent" value=" % " onclick="form.input.value = eval(form.input.value) / 100" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="4"> <input type="button" name="(" value=" ( " onclick="form.input.value += '('" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
      </tr> 
      <tr bgcolor="#000000"> 
       <td width="50" height="2"> <input type="button" name="four" value="4" onclick="form.input.value += '4'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name="five" value="5" onclick="form.input.value += '5'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name="six" value="6" onclick="form.input.value += '6'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="20" height="2"> </td> 
       <td width="50" height="2"> <input type="button" name="times" value="  x  " onclick="form.input.value += ' * '" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name="div" value="  /  " onclick="form.input.value += ' / '" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name=")" value=" ) " onclick="form.input.value += ')'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
      </tr> 
      <tr bgcolor="#000000"> 
       <td width="50" height="2"> <input type="button" name="seven" value="7" onclick="form.input.value += '7'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name="eight" value="8" onclick="form.input.value += '8'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name="nine" value="9" onclick="form.input.value += '9'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="20" height="2"> </td> 
       <td width="50" height="2"> <input type="button" name="plus" value="  +  " onclick="form.input.value += ' + '" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name="minus" value="  -  " onclick="form.input.value += ' - '" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name="round" value="Rnd" onclick="Round()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
      </tr> 
      <tr bgcolor="#000000"> 
       <td width="50" height="2"> <input type="button" name="zero" value="0" onclick="form.input.value += '0'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name="point" value="." onclick="form.input.value += '.'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name="pi" value="PI" onclick="form.input.value += '3.1415926535897932384626433832795'" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="20" height="2"> </td> 
       <td width="50" height="2"> <input type="button" name="pi2" value="+/-" onclick="Neg()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name="DoIt" value=" = " onclick="doit()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #9F0004; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50" height="2"> <input type="button" name="round2" value="Ran#" onclick="Ran()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
      </tr> 
      <tr bgcolor="#0000FF"> 
       <td width="50" height="24"> </td> 
       <td width="50" height="24"> </td> 
       <td width="50" height="24"> </td> 
       <td width="20" height="24"> </td> 
       <td width="50" height="24"> </td> 
       <td width="50" height="24"> </td> 
       <td width="50" height="24"> </td> 
      </tr> 
      <tr bgcolor="#000000"> 
       <td width="50"> <input type="button" name="quad" value="^2" onclick="form.input.value = form.input.value * form.input.value" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="root" value="root" onclick="Root()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="ln" value="ln" onclick="Ln()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="20"> </td> 
       <td width="50"> <input type="button" name="1/2" value="1/2" onclick="form.input.value += '0.5'" style="COLOR: #B3B300; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="1/3" value="1/3" onclick="form.input.value += '0.3333333333'" style="COLOR: #B3B300; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="1/4" value="1/4" onclick="form.input.value += '0.25'" style="COLOR: #B3B300; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
      </tr> 
      <tr bgcolor="#000000"> 
       <td width="50"> <input type="button" name="sin" value="sin" onclick="Sin()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="cos" value="cos" onclick="Cos()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="tan" value="tan" onclick="Tan()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="20"> </td> 
       <td width="50"> <input type="button" name="1/5" value="1/5" onclick="form.input.value += '0.2'" style="COLOR: #B3B300; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="1/6" value="1/6" onclick="form.input.value += '0.1666666667'" style="COLOR: #B3B300; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="1/7" value="1/7" onclick="form.input.value += '0.1428571429'" style="COLOR: #B3B300; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
      </tr> 
      <tr bgcolor="#000000"> 
       <td width="50"> <input type="button" name="sin2" value="asin" onclick="Isin()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="cos2" value="acos" onclick="Icos()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="tan2" value="atan" onclick="Itan()" style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="20"> </td> 
       <td width="50"> <input type="button" name="1/8" value="1/8" onclick="form.input.value += '0.125'" style="COLOR: #B3B300; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="1/9" value="1/9" onclick="form.input.value += '0.1111111111'" style="COLOR: #B3B300; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="1/10" value="1/10" onclick="form.input.value += '0.1'" style="COLOR: #B3B300; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
      </tr> 
     </tbody> 
    </table> 
   </form> 
  </div>  
 </body>
</html>

欢迎扫码关注我：

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

Copyright © 2019- 版权所有

Top