使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。效果如上：

第一步： 创建构建运算函数count()。

第二步： 获取两个输入框中的值和获取选择框的值。

提示：document.getElementById( id名 ).value 获取或设置 id名的值。

第三步： 获取通过下拉框来选择的值来改变加减乘除的运算法则。

提示：使用switch判断运算法则。

第四步：  通过 = 按钮来调用创建的函数，得到结果。

注意: 使用parseInt()函数可解析一个字符串,并返回一个整数。

代码：

 <!DOCTYPE html>

 <html>

  <head>

   <title> 事件</title>

   <script type="text/javascript">

    function count(){

     var a = document.getElementById("txt1").value;

     var b = document.getElementById("txt2").value;

     //获取第一个输入框的值

     //获取第二个输入框的值

     //获取选择框的值

     var c = document.getElementById("select").value;

     a = parseFloat(a);

     b = parseFloat(b);

     //获取通过下拉框来选择的值来改变加减乘除的运算法则

     //设置结果输入框的值

     switch(c){

         case "+":

         document.getElementById("fruit").value=parseInt(a)+parseInt(b);

         break;

         case "-":

         document.getElementById("fruit").value=parseInt(a)-parseInt(b);

         break;

         case "*":

         ocument.getElementById("fruit").value=parseInt(a)*parseInt(b);

         break;

         case "/":

         document.getElementById("fruit").value=parseInt(a)/parseInt(b);

         break;

     }

    }

   </script>

  </head>

  <body>

    <input type='text' id='txt1' />

    <select id='select'>

         <option value="+">+</option>

         <option value="-">-</option>

         <option value="*">*</option>

         <option value="/">/</option>

    </select>

    <input type='text' id='txt2' />

    <input type='button' value=' = ' onclick = "count()"/>

    <input type='text' id='fruit' />

  </body>

 </html>

JS实现一个简单的计算器的更多相关文章

  1. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  2. 用JS,做一个简单的计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8">   <title&g ...

  3. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  4. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  5. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  6. Android下实现一个简单的计算器源码

    下面的内容是关于Android下实现一个简单的计算器的内容. import android.app.Activity; import android.os.Bundle;import android. ...

  7. php+js实现一个简单的用户管理系统

    php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...

  8. 用JavaScript写一个简单的计算器

    本文使用js实现了一个简单的加.减.乘.除计算器. 以下是css部分代码: *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; ...

  9. 使用qt制作一个简单的计算器

    前言:今天使用qt制作了一个很简单的计算器,觉得挺有意思的,所以在这里跟大家分享一下. 这里先跟大家说说使用到的函数: 一.槽连接函数 connect(信号发送者,发送的信号,信号接收者,信号接收者的 ...

随机推荐

  1. 超级楼梯[HDU2041]

    超级楼梯 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  2. Java IO操作

    转自:http://www.cnblogs.com/jyan/articles/2505791.html Johnny Yan的博客 1 InputStream类型 InputStream的作用是标志 ...

  3. Android MVVM框架RoboBinding初探

    RoboBinding是一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架.MVVM模式是MVC模式的重要更新,使得项目结构更加的优美,易于维护以及方便 ...

  4. iOS -- MVC的理解

    今天在写项目的时候困惑了一下 我在写一个应用的主界面,其实是很简单的,上面有几个控件,我在想把空间写到viewController里会不会有点冗杂 后来查了一下,发现貌似也不需要分开写,毕竟界面好简单 ...

  5. 初始html5，遇到的第一个问题

    1.首先感到html5是html的延续,只是增加了新的标签属性,这是我的第一感觉 2.我写了几行画矩形的canvas入门代码,遇到了不显示问题 3.下面是我写完代码后的问题 刷新后还是这样 4.我的代 ...

  6. IIS7 Appcmd.exe 使用

    如果您运行的是 64 位 Windows,请从 %windir%\system32\inetsrv 目录而不是 %windir%\syswow64\inetsrv 目录中使用 Appcmd.exe. ...

  7. 提取安卓手机的recovery

    一直都是从网上下载的recovery文件安装到手机.至于这个小小的recovery到底是什么全然不知.能不能自己做一个recovery呢?因为功能比较多的clockworkmod(简称cmw)的官网上 ...

  8. [kuangbin带你飞]专题六 最小生成树

    学习最小生成树已经有一段时间了 做一些比较简单的题还算得心应手..花了三天的时间做完了kuangbin的专题 写一个题解出来记录一下(虽然几乎都是模板题) 做完的感想:有很多地方都要注意 n == 1 ...

  9. [ZZ] KlayGE 游戏引擎 之 Order Independent Transparency（OIT）

    转载请注明出处为KlayGE游戏引擎,本文的永久链接为http://www.klayge.org/?p=2233 http://dogasshole.iteye.com/blog/1429665 ht ...

  10. PHP 错误与异常 笔记与总结（2）错误（Fatal）

    (接上) d.Fatal error 致命级别的错误 —— 程序终止执行 [例7]调用一个未定义的方法 <?php echo md6('dee'); echo 'continue'; 输出: ( ...