使用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. css构造块级元素

    css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...

  2. POJ3254 Corn Fields（状压DP）

    题目给个n×m的地图,1可以放玉米0不可以,现在要放玉米,玉米上下左右不能相邻,问放法有几种. 当前一行的决策只会影响下一行,所以状压DP之: dp[i][S]表示前i行放完且第i行放玉米的列的集合是 ...

  3. 学习C# XmlSerializer 序列化反序列化XML

    类.变量常用头: [XmlRootAttribute]:对根节点的描述,在类声明中使用 如:下例的Html类 [XmlType]:对节点描述,在类声明中使用         如:下例的Head类 [X ...

  4. 策略模式c++【转】

    作用:定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化,不会影响到使用算法的客户. UML图: Strategy模式将逻辑(算法)封装到一个类(Context)里面,通过组合的 ...

  5. 使用Objective-C的文档生成工具:appledoc

    使用Objective-C的文档生成工具:appledoc 前言 做项目的人多了,就需要文档了.今天开始尝试写一些项目文档.但是就源代码来说,文档最好和源码在一起,这样更新起来更加方便和顺手.象 Ja ...

  6. cvReleaseImage 释放内存出错

    cvReleaseImage是OpenCV中C语言库中的释放图片内存的函数,比如我们加载或者克隆了一幅图片,当不需要这幅图片了时,我们为了避免内存泄露,需要释放这些空间,可以参见我之前的博客OpenC ...

  7. _jobdu_1002

    /************************************************************************/ /* 题目1002:Grading 时间限制:1 ...

  8. nova

    chen@controller:~$ nova usage: nova [--version] [--debug] [--os-cache] [--timings]             [--ti ...

  9. 【液晶模块系列基础视频】5.1X-GUI字体驱动1

    ============================= 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:ht ...

  10. 【iHMI43 4.3寸液晶模块】demo竖屏例程（版本1.01）发布

    ============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...