使用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. POJ1699 Best Sequence（AC自动机+状压DP）

    题目,求包含所有的给定的n个DNA片段的序列的最短长度. AC自动机上的DP题. dp[S][u]表示已经包含的DNA片段集合为S,且当前后缀状态是自动机第u个结点的最短长度 dp[0][0]=0 我 ...

  2. Color the Ball[HDU1199]

    Color the Ball Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  3. Travelling

    Travelling Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  4. ！cocos2d ccdictionary－>retain()的问题

    我再a类当中生命了一个dict,将它带入到b类当中,但没有在b类初始化时retain,于是在update当中找不到了.啃爹不.记得retain()

  5. extjs 2.0获取选中的radio的值

    var temp=winFormPanel.getForm().findField('selectedType').getGroupValue();

  6. word统计章节字数

    只有我这么无聊了..写论文的时候发现每次想看这个章节的字数统计时,还需要全选然后再看字数统计,太麻烦了.所以想着用宏写个能直接查看选定章节的字数统计. 具体方法如下: 建立宏:视图--宏--录制宏-- ...

  7. location.replace与location.href,location.reload的区别

    1. location.replace顾名思义是替换的意思 这种方法的原理是,用新页面的URL替换当前的历史纪录,这样浏览历史记录中就只有一个页面,后  退按钮永远不会变为可用 onclick=&qu ...

  8. CocoaPods 安装的第三方删除

    CocoaPods 第三方删除 我们使用CocoaPods非常高效地将一些第三方类库导入到我们的项目中,难免会出现一些错误,这时应怎么删除它呢?以下方法会帮你解决这个问题 打开Build Phases ...

  9. RN组件之ScrollView

    一.ScrollView 该组件封装了Android平台的ScrollView(滚动组件),并且提供触摸事件"responder"系统功能.使用ScrollView的时候 确保有一 ...

  10. Css - 黑魔法

    我们发现了一个新功能,现在你可以创建sticky块元素了.这和 fixed 块元素一样,但不同的是, sticky 块元素是不会遮挡另一个块元素的,最好看看demo 类似的功能实现还可以使用jquer ...