`
xiaoxie
  • 浏览: 33883 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

纯JS写的计算器

    博客分类:
  • WEB
 
阅读更多

 最近工作比较轻松,无聊的时候自己尝试写了一个简单的计算器,还望各位指正 以下为运行效果

 

<html>
  <head>
    <title>CalSelf.html</title>
	<style type="text/css">
	input {
	width: 50px;
    }
	</style>
	<script type="text/javascript">
	  var str=""
	  var num1;
	  var num2;
	  var opear;
      function num(no){
      str=str+no;
      document.getElementsByTagName("input")[0].value=str;
      }
      function Clear(){
      document.getElementsByTagName("input")[0].value="";
      str="";
      }
      //点击加减乘除事件
      function fun(op){
      //全局变量num1保存当前表框显示的数字内容
      num1=parseInt(document.getElementsByTagName("input")[0].value);
      //全局变量保存运算符加减乘除
      opear=op;
      if(op==1){//加
      op="+"
      }else if(op==2){//减
      op="-"
      }else if(op==3){//乘
      op="*"
      }else{//除
      op="/"
       }
      document.getElementsByTagName("input")[0].value=op;
      str="";
       }
       //按下等号下做的事件!
      function calculate(){
       var  result;
       num2=parseInt(document.getElementsByTagName("input")[0].value);
       if(opear==1){
       result=num1+num2
      }else if(opear==2){
       result=num1-num2
      }else if(opear==3){
       result=num1*num2
      }else{
       result=num1/num2
      }
      num2=result;
      document.getElementsByTagName("input")[0].value=result;
      }
	</script>
  </head>
  <body>
  <input type="text" style="width: 200px;">
  <table>
   <tr>
   <td><input type="button" value="1" onclick="num(1)"></td>
   <td><input type="button" value="2" onclick="num(2)"></td>
   <td><input type="button" value="3" onclick="num(3)"></td>
   <td><input type="button" value="+" onclick="fun(1)"></td>
   </tr>
   <tr>
   <td><input type="button" value="4" onclick="num(4)"></td>
   <td><input type="button" value="5" onclick="num(5)"></td>
   <td><input type="button" value="6" onclick="num(6)"></td>
   <td><input type="button" value="-" onclick="fun(2)"></td>
   </tr>
   <tr>
   <td><input type="button" value="7" onclick="num(7)"></td>
   <td><input type="button" value="8" onclick="num(8)"></td>
   <td><input type="button" value="9" onclick="num(9)"></td>
   <td><input type="button" value="*" onclick="fun(3)"></td>
   </tr>
   <tr>
   <td><input type="button" value="0" onclick="num(0)"></td>
   <td><input type="button" value="Clear" onclick="Clear()"></td>
   <td><input type="button" value="=" onclick="calculate()"></td>
   <td><input type="button" value="/" onclick="fun(4)"></td>
   </tr>
   </table> 
  </body>
</html>
  • 大小: 2.8 KB
分享到:
评论

相关推荐

    JS版计算器源码

    7. **样式与布局**:虽然这不是纯JavaScript的功能,但为了让计算器在不同的浏览器上看起来和表现一致,开发者可能需要使用CSS来调整元素的样式和布局,确保跨浏览器兼容性。 8. **性能优化**:为了提供流畅的用户...

    纯javascript代码编写计算器程序.pdf

    根据给定的文件内容,我们可以了解到一个使用纯JavaScript编写的简单网页计算器程序的知识点。这个程序允许用户进行基本的数学运算,包括加法、减法、乘法和除法。接下来,将对程序的各个组成部分进行详细说明。 1....

    纯javascript制作的简单js计算器效果.zip

    【标题】"纯javascript制作的简单js计算器效果.zip"是一个包含使用JavaScript编程语言实现的简易计算器项目的压缩包。这个项目可能是一个教学资源或者一个初学者的实践作品,它展示了如何利用JavaScript的基本语法和...

    纯JavaScript实现计算器

    用JavaScript实现一个运算式的计算 a. 支持加,减,乘,除(+, -, *, /) b. 支持输入合法的数字,包括小数,不考虑非法输入和数字越界(0-9, .) sample : "3+8.3*1" 结果是11.3 ”3.2 + 0 -8.7“ 结果是-5.5 ...

    纯JavaScript的简单模拟计算器

    【纯JavaScript的简单模拟计算器】 在前端开发中,构建一个基于JavaScript的模拟计算器是一个常见的练习,这可以帮助开发者熟悉DOM操作、事件处理以及基本的数学逻辑。在这个项目中,我们将探讨如何仅使用...

    Calculator【纯JavaScript实现的网页计算器

    【标题】"Calculator【纯JavaScript实现的网页计算器】"是一个基于Web的项目,它使用JavaScript这一客户端脚本语言,为用户提供了类似传统桌面计算器的功能。这个项目的核心目标是利用JavaScript的强大功能,在网页...

    基于Javascript的纯手工制作的计算器

    这个简单的JavaScript计算器项目是一个很好的起点,帮助初学者理解基本的Web开发原理。通过扩展此项目,你可以添加更复杂的功能,如连续运算、括号支持、科学计算模式等,从而深入学习JavaScript和前端开发。

    JavaScript计算器

    6. **样式和布局**:虽然这不是纯JavaScript的问题,但在实现JavaScript计算器时,我们可能还会涉及到CSS来控制计算器的外观,包括按钮的大小、颜色、边框、排列方式等。 7. **即时更新显示**:用户每次点击按钮,...

    纯 HTML+CSS+JavaScript 的计算器

    需求:制作web版计算器,要求实现+-*%和平方,开方。 2.0版:修复归零的问题 3.0版:支持正负数; 4.0版:修复多个多个运算符号导致不能计算的bug; 5.0版: 多个小数点的bug, 自然数e的问题, 0.1,0.2,0.04等...

    JavaScript 开发计算器

    用纯javascript做的计算器,按键功能齐全,初级水平,用来交作业吧

    网页模板——纯javascript制作的简单js计算器效果.zip

    网页模板——纯javascript制作的简单js计算器效果是一个用于学习和实践JavaScript编程的项目。这个项目主要展示了如何使用JavaScript语言创建一个基本的计算器功能,让用户在网页上进行简单的数学运算。在这个过程中...

    简单纯js编写的计算器

    在本文中,我们将深入探讨如何使用纯JavaScript编写一个简单的计算器,这是学习JavaScript Web API和前端开发的一个很好的实践项目。JavaScript,作为ECMAScript规范的一部分,是网页开发中最常用的语言之一,尤其在...

    js实现简单计算器

    在这个案例中,"js实现简单计算器"是一个使用纯JavaScript编写的计算器应用程序。这个项目旨在展示如何利用JavaScript实现基本的数学计算功能,包括加法、减法、乘法和除法。 首先,JavaScript中的基础四则运算可以...

    纯JavaScript计算器

    【JavaScript计算器】是一种基于Web的计算工具,完全使用JavaScript编程语言实现。JavaScript是一种广泛用于网页开发的脚本语言,可以在客户端浏览器上运行,无需服务器端交互。本项目旨在创建一个功能齐全、用户...

    CSS3和js超酷iPhone样式科学计算器插件

    插件描述:CalcSS3是一款非常酷的CSS3和js模仿iPhone样式科学计算器插件。该计算器插件没有使用图片,纯CSS制作。该计算器是科学型的,可以处理乘方、开方、指数、对数等复杂的数学运算。演示地址:...

    最nb的网页版多级计算器,纯Javascript

    总的来说,这个"最nb的网页版多级计算器,纯Javascript"项目展示了JavaScript在网页开发中的强大功能,包括用户交互、逻辑处理、数学运算和界面更新等方面。它不仅是一个实用的工具,也是学习JavaScript和计算原理的...

    纯js实现的科学计算器.rar

    《纯JavaScript实现科学计算器》 在网页开发中,有时候我们需要为用户提供高级的计算功能,比如科学计算,这就需要用到科学计算器。本项目通过纯JavaScript技术,实现了这样一个功能丰富的科学计算器,让我们一起...

    纯javascript代码实现计算器功能(三种方法)

    以下是使用纯JavaScript实现计算器功能的三种方法。 方法一:基本的计算器实现 首先,我们将通过创建一个简单的网页,其中包含用于输入数字和进行基本运算(加、减、乘、除)的按钮。我们将使用HTML来构建界面,CSS...

    javaScript 网页版计算器(web Calculate)

    这个项目展示了如何用纯JavaScript实现一个功能完备、交互友好的计算器,其中包括连续运算和存储运算等功能。 首先,HTML负责构建计算器的用户界面,包括数字按钮、运算符按钮、清除键以及显示区域。这些元素通过`...

Global site tag (gtag.js) - Google Analytics