用JS编写一款计算器

最新推荐文章于 2020-07-01 22:07:57 发布
最新推荐文章于 2020-07-01 22:07:57 发布
阅读量424 收藏 1
点赞数 1
分类专栏： 算法设计 文章标签： js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eqmaster/article/details/105878260
版权

摘要

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

image

本文主要用到的是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>

欢迎扫码关注我：

image

丷丩
关注
专栏目录
js编写的一个网页版的计算器
05-16
这是一个用javascript编写的计算器，界面是网页版。而且采用的是css布局，而不是用表格，模仿的是windows8.1自带的计算器。
js编写简易的计算器
12-28
本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下 使用绑定时间触发 加减乘除 加： 减： 乘： 除： 源代码： <body> 第一个数：<input type=text id=num1 /><p></p> ...
使用JS写一个计算器
weixin_30646315的博客
11-08 5686
先上效果图： 简单的加减乘除功能还是有的，所以我们就考虑怎么来实现这个功能。 根据预期效果，可以确定页面中的布局要用到table tr td。 所以先放上页面布局,table的边框宽度border，colspan来设置某一行的宽度为4倍一列宽度，显示结果的地方要显示输入的所有值，先用id来区分，给value一个空，来获取其他按钮键入的value值，...
JavaScript计算器
运维工程师(Sun Robin)
09-09 521
计算器 M Backspace CE C MC MR MS M+ 7 8 9
javascript编写计算器
muli
03-01 581
javascript编写计算器 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;07-计算器&lt;/title&gt; &lt;script type="text/jav
【Web开发技术】Javascript编写的简易计算器
爱.NET
12-18 265
08年9月入学，12年7月毕业，结束了我在软件学院愉快丰富的大学生活。此系列是对四年专业课程学习的回顾，索引参见：http://blog.csdn.net/xiaowei_cqu/article/details/7747205 用JS编写计算器 Javascript相当只简洁方便，颇有MATLAB之风 这是曾经web课上的作业，用js写个简单的计算器 这里关键是定义计算器的函...
使用 JavaScript 编写的科学计算器（附源代码）.zip
最新发布
07-24
使用 JavaScript 编写的科学计算器（附源代码）   项目：使用 JavaScript 编写的科学计算器（附源代码） 科学计算器是 HTML5、CSS 和 JavaScript 中的一个简单项目。该项目用于解决数字的数学计算。您可以在此项目...
JavaScript编写简单的计算器
10-23
JavaScript编写简单计算器的知识点涵盖了HTML结构布局、CSS样式设计和JavaScript基础编程。以下将详细介绍这些知识点： 1. HTML页面结构 一个计算器的HTML页面结构通常包括以下几个部分： - HTML文档声明和语言...
使用 JavaScript 编写的提示计算器.zip
07-01
项目：使用 JavaScript 编写的小费 计算器（附源代码） 小费计算器是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这个项目很有趣。用户可以计算从单笔账单支付中可以获得的小费金额。此外，用户可以将小费...
使用JavaScript 编写简单计算器
10-25
对于计算器这样的应用，可以使用更安全的数学库，如`math.js`，或者自己编写解析和计算表达式的逻辑。 6. **DOM 操作**： 通过JavaScript操作DOM元素，如`obj.expr.value`获取或设置`expr`输入框的值。`this.form`...
Javascript编写的计算器
12-18
参考博客：http://blog.csdn.net/xiaowei_cqu/article/details/7081348
js实现简单计算器
05-23
使用js实现的简单计算器功能呢
js(javascript)编写的计算器
06-03
用javascript编写的一个计算器 实现行为与结构的分离，页面的XHTML文件中不出现事件响应句柄（即onclick等），全部计算在JavaScript文件(.js)中完成
javascript写的计算器
11-04
这个是一个界面比较好、而且比较简单地用javascript语言和html语言写的一个计算器，非常适合初学者
javascript 写的计算器
05-10
用javascript写的,功能一般,纯属个人练习,供参考,见笑
利用js编写一个计算器
不再彷惶
07-01 410
点击此处查看在线版计算器 代码：写的不好，还有很大改进空间 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>计算器3.0</title> <style type="text/css"> body{ background-color: #bfa; } inp
使用JS编写简单的计算器
weixin_44530087的博客
06-02 410
使用JS编写简单的计算器 HTML写出计算器整体框架 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <link rel="stylesheet" href="css/Calculator.css" /> </head> <body> <div id="calculator"
js编写的简易计算器
W1365966490的专栏
02-27 427
/*   获得用户输入的数字 绑定onclick事件   开始运算   求结果  */   var flag = true;   function getnum(num){    if(!flag){     document.getElementById('res').value = '';     flag = true;    }    document.getElem
用JavaScript写一个简单的计算器
ayi644640的博客
10-02 863
本文使用js实现了一个简单的加、减、乘、除计算器。 以下是css部分代码： *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; height:auto; outline:1px solid #b9b9b9; margin:50px...
用js编写一个计算器
05-27
在这个计算器中，我们使用了一个input元素来显示计算结果，并定义了一些按钮来输入数字和运算符。我们还定义了一些JavaScript函数来实现计算器的核心功能： - addToScreen：将数字和运算符添加到屏幕上。 - clear...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丷丩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值