使用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. Pebbles

    Pebbles Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  2. gprof参数说明及常见错误

    参数说明 l -b 不再输出统计图表中每个字段的详细描述. l -p 只输出函数的调用图(Call graph的那部分信息). l -q 只输出函数的时间消耗列表. l -e Name 不再输出函数N ...

  3. BZOJ3809: Gty的二逼妹子序列

    Description Autumn和Bakser又在研究Gty的妹子序列了!但他们遇到了一个难题.   对于一段妹子们,他们想让你帮忙求出这之内美丽度∈[a,b]的妹子的美丽度的种类数.   为了方 ...

  4. ReLU

    预训练的用处:规则化,防止过拟合:压缩数据,去除冗余:强化特征,减小误差:加快收敛速度. 标准的sigmoid输出不具备稀疏性,需要用一些惩罚因子来训练出一大堆接近0的冗余数据来,从而产生稀疏数据,例 ...

  5. QT快捷键

    F1使用方法:选中某一类或函数,按下F1,出现帮助文档 F2使用方法:选中某一类或函数,按下F2,迅速定位到该类或函数声明的地方或被调用的地方 Ctrl+鼠标滚轮的使用方法:按住Ctrl,使鼠标滚轮旋 ...

  6. Mui - 全局css

    头部(mh) <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-ic ...

  7. [学习笔记]RAID及实验

    RAID: RAID 0 好比只用左手拿了一摞大饼放在那里,相比于只拿一张饼吃,吃的速度会加快.但是万一掉了,就没有了. RAID 1 好比左右手两手一边一个大饼,怎么样都有的吃.但是一只手掉了,还有 ...

  8. error while loading shared libraries: xxx.so.x" 错误的原因和解决办法

    今天在执行一个protobuf程序时,提示error while loading shared libraries: libprotobuf.so.8: cannot open shared obje ...

  9. DS实验题 Dijkstra算法

    参考:Dijkstra算法 数据结构来到了图论这一章节,网络中的路由算法基本都和图论相关.于是在拿到DS的实验题的时候,决定看下久负盛名的Dijkstra算法. Dijkstra的经典应用是开放最短路 ...

  10. PIVOT 用于将列值旋转为列名

    PIVOT 用于将列值旋转为列名(即行转列),在 SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT 的一般语法是:PIVOT(聚合函数(列) FOR 列 in (…) )A ...