javascript实现的简单计算器

最新推荐文章于 2023-12-01 19:30:20 发布
置顶 最新推荐文章于 2023-12-01 19:30:20 发布
阅读量784 收藏
点赞数
分类专栏： HTML 文章标签： javascript button input class div 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s468160201880427556/article/details/4058019
版权

 <!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=gb2312" />
<title>无标题文档</title>
<style>
.h {
 font-size: 14px;
 font-weight: normal;
 height: 35px;
 width: 35px;
}
</style>
<script language="javascript" >
var num,num1,flag=true,tr,tag;
function  EnterNum(obj)
{
 if (flag==false)
  { 
   num1=document.form1.show.value+obj.value;
   document.form1.show.value=num1;           
  }
 else
  {num=document.form1.show.value+obj.value;
   document.form1.show.value=num;
   
  } 
}

function Enterop(obj)  //获取符号
{op=obj.value;
 flag=false;
 document.form1.show.value="";
}


function GetResult(obj)  //计算结果
{
 switch(op)
 {case "+":{tr=parseFloat(num)+parseFloat(num1)};break;
  case "-":{tr=parseFloat(num)-parseFloat(num1)};break;
  case "*":{tr=parseFloat(num)*parseFloat(num1)};break;
  case "/":{tr=parseFloat(num)/parseFloat(num1)};break;
 
     }
   num=tr;
  flag=false; 
  document.form1.show.value=tr;
}

function Clear()   //清除
{
   document.form1.show.value="";
  // num1="";
  // num="";
   flag=true;
}

</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="200" border="1" align="center" cellpadding="0" cellspacing="0" >
    <tr>
      <td height="40" colspan="4" bordercolor="#666666"><label>
       
        <div align="center">
          <input name="show" type="text" id="show" />       
        </div>
      </label></td>
    </tr>
    <tr>
      <td width="51" height="40" bordercolor="#666666"><label>
        <div align="center">
          <input name="b1" type="button" class="h" id="b1" value="1"  οnclick="EnterNum(this)"/>
        </div>
      </label></td>
      <td width="46" height="40" bordercolor="#666666"><div align="center">
        <input name="b2" type="button" class="h" id="b2" value="2" οnclick="EnterNum(this)"/>
      </div></td>
      <td width="48" height="40" bordercolor="#666666"><div align="center">
        <input name="b3" type="button" class="h" id="b3" value="3" οnclick="EnterNum(this)" />
      </div></td>
      <td width="45" height="40" bordercolor="#666666"><div align="center">
        <input name="b4" type="button" class="h" id="b4" value="+"  οnclick="Enterop(this)"/>
      </div></td>
    </tr>
    <tr>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b5" type="button" class="h" id="b5" value="4" οnclick="EnterNum(this)"/>
      </div></td>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b6" type="button" class="h" id="b6" value="5" οnclick="EnterNum(this)" />
      </div></td>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b7" type="button" class="h" id="b7" value="6" οnclick="EnterNum(this)"/>
      </div></td>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b8" type="button" class="h" id="b8" value="-"  οnclick="Enterop(this)"/>
      </div></td>
    </tr>
    <tr>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b9" type="button" class="h" id="b9" value="7" οnclick="EnterNum(this)"/>
      </div></td>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b10" type="button" class="h" id="b10" value="8" οnclick="EnterNum(this)"/>
      </div></td>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b11" type="button" class="h" id="b11" value="9" οnclick="EnterNum(this)"/>
      </div></td>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b12" type="button" class="h" id="b12" value="*"   οnclick="Enterop(this)"/>
      </div></td>
    </tr>
    <tr>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b13" type="button" class="h" id="b13" value="C" οnclick="Clear()"/>
      </div></td>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b14" type="button" class="h" id="b14" value="0" οnclick="EnterNum(this)"/>
      </div></td>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b15" type="button" class="h" id="b15" value="="  οnclick="GetResult(this)"/>
      </div></td>
      <td height="40" bordercolor="#666666"><div align="center">
        <input name="b16" type="button" class="h" id="b16" value="/"   οnclick="Enterop(this)"/>
      </div></td>
    </tr>
  </table>
</form>
</body>
</html>

 

***************************************************************

本代码能实现多个数的连续加减乘除，但必须得第一个算术式得出结果后再接着计算。        **

如：1+2-3，就应先计算不1+2=3，再-3，按“=”得出最后结果。                              **

实现连续计算时不是很方便，此程序也可通过正则表达式来实现，可本人对正则表达式       **

理解不是很清楚，有好的方法希望分享，我待候好消息。。。。。。。。。                      **

***************************************************************

S468160201880427556
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript实现简单计算器
SHINE_SUNNY1的博客
08-09 2147
javascript实现简单计算器这个计算机主要通过二维数组将其存在一个数组中，再通过函数控制显示出的效果，有些键位占着两列，通过colspan函数合并两列，先将整个计算机的外部样式设计出来，主要实现代码以及效果图如下所示：var btns=[ [ {text:"AC",id:"btn_C",value:"c",col:1},
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
【JavaScript项目】如何用JavaScript实现 计算器？（附完整源码）
最新发布
tutu6663的博客
12-01 4057
实现了如上图所示的一般计算器的功能包括（1）加、减、乘、除、取余这样的基本运算（好像计算器“%”这个符号不是取余，是百分号的意思，但在这里是取余的意思）（2）还有功能按键按键：退格，清空，按键“+/-”是给当前数字取相反数的意思（3）最上面的长格子用来显示输入的算式，点击“=”号后会变成计算后结果（4）有一定交互响应，比如鼠标放在按键上，按键颜色会变深。
JavaScript 计算器
allway2的博客
06-02 7249
在本教程中，我们将创建一个简单的JavaScript 计算器。该计算器能够对 2 个或 2 个以上的数字进行加减乘除。计算器可以成为日常生活中非常有用的应用程序。您可以使用计算器来计算您的购物账单、计算您的贷款、执行简单的数学计算等。一般来说，我们有两种类型的计算器，一种是科学计算器，另一种是简单计算器。科学计算器用于执行复杂的数学计算，如平方根、平方、立方、对数、三角函数等。而简单的计算器用于执行简单的数学计算，如加法、减法、乘法和除法。我们将在本文中使用 HTML、CSS 和 JavaScript 逐步
javascript简易计算器
a17783481239的博客
09-18 2399
查看历史记录
javascript制作简易计算器,javascript简易计算器代码
chatgpt001的博客
11-09 2341
计算器*{margin: 0;padding: 0;body{.box{.box h2{.box a{.box .sp{789X456-1
javascript实现简易计算器的代码
10-22
在本文中，我们将深入探讨如何使用JavaScript实现一个简易计算器。这个计算器可以进行基本的加、减、乘、除运算，并具备清零、退格和等于功能。以下是对代码的详细解释： 首先，我们需要一个HTML结构来展示计算器的...
JavaScript实现简易计算器小功能
01-21
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> &...
JavaScript简易计算器
02-28
利用JavaScript简易计算器，北大青鸟javascript作业题
JavaScript实现一个简易的计算器实例代码
05-14
JavaScript实现一个简易的计算器实例代码 JavaScript实现一个简易的计算器实例代码
JavaScript实现的简单的计算器（web）
04-29
JavaScript实现的简单的计算器，这是参考我同学的代码实现，希望能够帮助到你
javascript实现简易计算器功能
10-14
在本教程中，我们将探讨如何使用JavaScript实现一个简易计算器，涵盖基本的四则运算、小数点、回退、清零等核心功能。这个项目旨在帮助开发者熟练掌握JavaScript编程技巧，包括事件处理、异常处理以及页面元素交互。...
javascript实现简易计算器
12-11
在本文中，我们将探讨如何使用JavaScript实现一个简易的加减乘除计算器。这个计算器是基于HTML和CSS构建的用户界面，结合JavaScript进行动态计算。首先，我们来看一下HTML部分，它包括两个输入框（`...
JavaScript 用三种方法做一个简易计算器
m0_62496369的博客
10-21 7501
new关键字执行过程 // 1.new构造函可以在内存中创建了一个空的对象 // 2.this就会指向刚才创建的空对象 // 3.执行构造函数里面的代码 给这个空对象添加属性和方法 // 4.返回这个新对象(所以构造函数里面不需要return)
如何运用JavaScript中的函数做出一个简易计算器呢？
weixin_70747888的博客
03-21 2152
使用JS的函数功能，制作一个简易的计算器，包括加、减、乘、除的功能。输入任意操作数，使用函数传参的方式完成计算器的功能。这就是利用JS中的函数做出的很简易的一个计算器的效果，各位小伙伴快去试试吧！
用javascript做一个计算器,用js做一个计算器代码
阿发狗伪原创
10-18 3638
大家好，给大家分享一下怎么用javascript做一个简单的计算器，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！  由于在之前的博客中有对html和css进行详细的讲解，再次就不多叙述，直接上代码。因为js中用到了JQuery选择器所以在html中使用标签引入了JQuery，在html中为每个按钮单击绑定计算器事件cal()并传入当前点击对象thispython for语句用法。   .html文件：   .css文件：   静态页面如图示： 1.功能：实现简单的数值的加减乘
JavaScript实现计算器
wangshiyi13的博客
07-18 5376
使用JavaScript编写了一个简易的计算器，基本与手机计算器一致。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值