用JS编写一款计算器

news/2024/7/19 14:09:45 标签: js, css, html

摘要

前端计算器的编写方法有很多插件可以完成，本文通过html+html" title=css>css+javascript原生方法编写一款计算器，效果截图如下：

image

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

html"><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'"html" title=css>css"> 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'"html" title=css>css"> 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'"html" title=css>css"> 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 = ''"html" title=css>css"> 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"html" title=css>css"> 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 += '('"html" title=css>css"> 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'"html" title=css>css"> 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'"html" title=css>css"> 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'"html" title=css>css"> 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 += ' * '"html" title=css>css"> 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 += ' / '"html" title=css>css"> 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 += ')'"html" title=css>css"> 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'"html" title=css>css"> 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'"html" title=css>css"> 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'"html" title=css>css"> 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 += ' + '"html" title=css>css"> 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 += ' - '"html" title=css>css"> 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()"html" title=css>css"> 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'"html" title=css>css"> 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 += '.'"html" title=css>css"> 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'"html" title=css>css"> 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()"html" title=css>css"> 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()"html" title=css>css"> 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()"html" title=css>css"> 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"html" title=css>css"> style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="root" value="root" onclick="Root()"html" title=css>css"> style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="ln" value="ln" onclick="Ln()"html" title=css>css"> 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'"html" title=css>css"> 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'"html" title=css>css"> 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'"html" title=css>css"> 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()"html" title=css>css"> style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="cos" value="cos" onclick="Cos()"html" title=css>css"> style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="tan" value="tan" onclick="Tan()"html" title=css>css"> 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'"html" title=css>css"> 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'"html" title=css>css"> 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'"html" title=css>css"> 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()"html" title=css>css"> style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="cos2" value="acos" onclick="Icos()"html" title=css>css"> style="COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
       <td width="50"> <input type="button" name="tan2" value="atan" onclick="Itan()"html" title=css>css"> 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'"html" title=css>css"> 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'"html" title=css>css"> 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'"html" title=css>css"> style="COLOR: #B3B300; BACKGROUND-COLOR: #000000; HEIGHT: 25 px; WIDTH: 40px" /> </td> 
      </tr> 
     </tbody> 
    </table> 
   </form> 
  </div>  
 </body>
</html>

欢迎扫码关注我：

image


http://www.niftyadmin.cn/n/1372116.html

相关文章

几何及数学的几种算计介绍

几何及数学的几种算计介绍

主要内容 1.规则多边形已知边数计算内角 2.规则多边形已知边数计算外角 3.规则多边形已知外角求边数 4.已知数字计算罗马数字 5.已知三个顶点计算三角形的面积 6.判断一个数是不是素数 1.规则多边形已知边数计算内角 function side(n) {var edgeNum ((n - 2) * 180) / n;var i…
阅读更多...
世卫组织使用的GIS软件是哪款？

世卫组织使用的GIS软件是哪款？

摘要 在此次新冠病毒疫情中&#xff0c;使用微信或支付宝等扫描二维码进出小区、园区、商场等的背后&#xff0c;都是利用GIS形成空间防控闭环。事件卫生组织也一直通过GIS工具进行疫情方面的研究和使用。 世卫组织使用的GIS软件有哪些&#xff1f; Epi Info 7 (CDC)Free Map…
阅读更多...
QGIS：让数据随时间动起来

QGIS：让数据随时间动起来

摘要 时间是空间数据集的重要组成部分。比如在国土空间规划编制中历年的土地利用变迁&#xff0c;人口迁徙等。除位置信息外&#xff0c;时间可以使用另一个维度来分析和可视化数据。 通过时间序列化的动态展示&#xff0c;呈现出来的数据肯定要比静态的更加直观&#xff0c;更…
阅读更多...
QGIS：如何快速合并多个Shapefile？

QGIS：如何快速合并多个Shapefile？

摘要 要合并两个以上Shapefile吗&#xff1f;是否所有的形状文件都是相同的类型&#xff0c;如是即可以合并&#xff0c;即都是“点”、“线”或“多边形”&#xff1f;那就开始一次性合并多个shapfile吧。 步骤 1.&#xff09;将所有待合并文件放在一个文件夹中&#xff0c;…
阅读更多...
QGIS：从OSM上下载，导出，编辑数据

QGIS：从OSM上下载，导出，编辑数据

摘要 OSM地图是一个可以自由编辑的地图&#xff0c;易于使用。在本文中&#xff0c;我们将看到如何编辑和直接下载OSM地图上的数据&#xff08;以及通过QGIS下载数据。&#xff09;以及如何导出、下载.osm文件并将其转换为任何其他文件。 编辑数据 1.&#xff09;登录 在开始编…
阅读更多...
GIS前沿：GIS是5G网络的关键，GIS如何影响5G？

GIS前沿：GIS是5G网络的关键，GIS如何影响5G？

第五代移动网络&#xff08;5G&#xff09;将促进互联互通&#xff0c;并带来许多新的技术进步&#xff0c;因此它成为当前的技术流行语也就不足为奇了。很多人意识到&#xff0c;当网络变得广泛时&#xff0c;很多情况会发生变化&#xff0c;但很少有人意识到它是如何与GIS技术…
阅读更多...
GIS应用：什么是4D施工？

GIS应用：什么是4D施工？

随着3D建筑信息建模&#xff08;BIM&#xff09;作为设计交付过程的技术支持应用&#xff0c;建筑公司已经在寻找将这些3D BIM模型用于下游施工过程的方法。现在&#xff0c;工程师正在将4D建模纳入其工作流程。4D BIM 将时间维度添加到3D CAD模型中&#xff0c;使团队可以分析…
阅读更多...
LeafletJS-Markers

LeafletJS-Markers

为了在地图上标记单个位置&#xff0c;传单提供了标记。这些标记使用标准符号&#xff0c;并且可以自定义这些符号。在本章中&#xff0c;我们将看到如何添加标记以及如何自定义&#xff0c;动画化和删除它们。 添加一个简单的Marker 要使用Leaflet JavaScript库将标记添加到…
阅读更多...
最新文章

Copyright @ 2022~2023