使用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. BZOJ3776 : 警察局

    怎么3776又换题目了…换题目了…题目了…目了…了… SCC缩点后只有入度或者出度为0的点必须要放警察局 假设一共有t-1个入度或者出度为0的SCC q[1]-q[t-1]表示这些SCC中点的个数 q ...

  2. c++ string 结束符‘\000’

    昨天输出string类型时总是出错,发现输出到文件的一行里多了^@,输出到console却看不到,debug发现,string类型中多了\000,这主要由于我想要用\0截掉字符串最后一位,所以把字符串 ...

  3. telerik 某些ajax拿数据方式下 load on demand 不起作用

    方法一:加入以下代码 <%= Html.Telerik().ScriptRegistrar().DefaultGroup(group => { group.Add("teleri ...

  4. SecureCrt脚本（二）二级对象之Dialog

    Crt自动化 测试 SecureCrt脚本 JS脚本   1.引言 2.Dialog属性和方法 2.1.属性 2.2.方法 2.2.1.FileOpenDialog 2.2.2.MessageBox ...

  5. java：正则移出html元素

    package com.loongtao.general.crawler.slave; import java.util.regex.Matcher; import java.util.regex.P ...

  6. Tomcat设置默认启动项目及Java Web工程设置默认启动页面

    Tomcat设置默认启动项目 Tomcat设置默认启动项目,顾名思义,就是让可以在浏览器的地址栏中输入ip:8080,就能访问到我们的项目.具体操作如下: 1.打开tomcat的安装根目录,找到Tom ...

  7. filter:alpha(opacity=100,style=1)

    filter:alpha(opacity=100,style=1) 1.opacity属性:设置透明度,取值0至100之间的任意数值,100表示完全不透明: 2.style属性:设置渐变风格: 0表示 ...

  8. Programming with gtkmm 3

      https://developer.gnome.org/gtkmm-tutorial/unstable/index.html.zh_CN 1. 序言 1.1. 本书 1.2. gtkmm 2. 安 ...

  9. uva10098 Generating Fast, Sorted Permutation

    #include"iostream"#include"stdio.h"#include"string.h"#include"alg ...

  10. 移动Web—CSS为Retina屏幕替换更高质量的图片

    来源:互联网 作者:佚名 时间:12-24 10:37:45 [大 中 小] 点评:Retian似乎是屏幕显示的一种趋势,这也是Web设计师面对的一个新挑战;移动应用程序的设计师们已经学会了如何为Re ...