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

提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var 啊= document.getElementById(“id”）.value；

注意标签值的获取一定别忘了  value

代码如下

 <!DOCTYPE html>

 <html>

  <head>

   <title> 事件</title>

   <script type="text/javascript">

    function count(){

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

     var x=parseInt(document.getElementById("txt1").value);

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

     var y=parseInt(document.getElementById("txt2").value);

     //获取选择框的值

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

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

     switch(m)

     {

         case'+':

         result=x+y;

         break;

         case'-':

         result=x-y;

         break;

         case'*':

         result=x*y;

         break;

         case'/':

         result=x/y;

         break;

          }

      //设置结果输入框的值

    document.getElementById("fruit").value=result;

    }

   </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学习】慕课网6-11编程联系 简单计算器的更多相关文章

  1. 教你一步一步用 Node.js 制作慕课网视频爬虫

    转自:http://www.jianshu.com/p/d7631fc695af 开始 这个教程十分适合初学 Node.js 的初学者看(因为我也是一只初学的菜鸟~) 在这里,我就默认大家都已经在自己 ...

  2. JS入门-慕课网

    javascript是一种弱类型的数据交互语言, ch 1 数据类型 js中有六种数据类型:nunmber.string.boolean.null.undenfined.object原始类型:numb ...

  3. 慕课网 javascript深入浅出编程练习

    任务 请在index.html文件中,编写arraysSimilar函数,实现判断传入的两个数组是否相似.具体需求: 1. 数组中的成员类型相同,顺序可以不同.例如[1, true] 与 [false ...

  4. Node.js学习笔记（1）--一个最简单的服务器请求

    说明(2017-5-2 10:27:03): 1. 需要安装node,http://nodejs.cn/download/ 2. 安装完后,在cmd里输入node -v可以查看版本. 3. 代码foo ...

  5. JS 学习笔记（二）Ajax的简单使用

    使用Ajax访问本地TXT文件 ajax.js // 创建请求对象 var ajax = new XMLHttpRequest(); // 建立连接 ajax.open('get', 'test.tx ...

  6. Lex与Yacc学习（六）之lex & yacc (简单计算器程序) 运行

    词法分析程序ch3-01.l %{ #include "ch3-01.tab.h" extern int yylval; %} %% [0-9]+ { yylval = atoi( ...

  7. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  8. 【JS学习】慕课网8-17编程练习 网页的返回与跳转

    编程练习 制作一个跳转提示页面: 要求: 1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如慕课网主页. 2. 如果点击“返回”按钮则返回前一个页面. 代码如下: 需要注意的是 ...

  9. JavaScript入门--慕课网学习笔记

     JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...

随机推荐

  1. 条款16：成对使用 new和delete时要采取相同的形式

    std::string* stringPtr1=new std::string; srd::string* stringPtr2=new std::string[100];   对应地 delete也 ...

  2. Python之 set的特点

    set的内部结构和dict很像,唯一区别是不存储value,因此,判断一个元素是否在set中速度很快. set存储的元素和dict的key类似,必须是不变对象,因此,任何可变对象是不能放入set中的. ...

  3. 十、设计模式之代理(Proxy)模式

    什么是代理模式 代理模式是对象的结构模式,为其他对象提供一种对象以控制对这个对象的访问. 代理模式的结构图如下:(源自大话设计模式)   Subject:定义了RealSubject和Proxy的公共 ...

  4. 转载 Struts2之------Action类中的get，set方法和execute方法的使用规范和使用流程(规范是没有理由的，必须遵守！！！)

    1,Action中get,set方法的使用流程? 前台form中有一个<input type="text" name="username"/> 如果 ...

  5. find和grep技巧

    1. find ./ -name "*streaming*"  查找文件 2.  grep -r KUBE_LOGTOSTDERR /etc/kubernetes/*  查找内容

  6. 最近开发的项目，遇到用户上传excel文件并导入数据到系统这个需求，而有excel中有的单元格是日期格式，本文介绍怎么从excel中读取日期格式的数据。

    可以先判断单元格的类型,有的日期是字符串存储的,有的是按日期存储的(单元格按数字解析),代码如下: Cell cell = row.getCell(); Date date = null; if (c ...

  7. php wordwrap()函数 语法

    php wordwrap()函数 语法 wordwrap()函数怎么用? wordwrap()函数表示按照指定长度对字符串进行折行处理,语法是wordwrap(string,width,break,c ...

  8. 洛谷P2015 二叉苹果树（树状dp）

    题目描述 有一棵苹果树,如果树枝有分叉,一定是分2叉(就是说没有只有1个儿子的结点) 这棵树共有N个结点(叶子点或者树枝分叉点),编号为1-N,树根编号一定是1. 我们用一根树枝两端连接的结点的编号来 ...

  9. RealsenseD415/D435深度相机常用资料汇总

    1.Realsense SDK 2.0 Ubuntu 16.04 安装指导网址https://github.com/IntelRealSense/librealsense/blob/master/do ...

  10. Vue 电影信息影评（豆瓣，猫眼）

    Vue电影信息影评网站 此网站是我的毕业设计,题目是"基于HTML5的电影信息汇总弄网站",由于最近在看Vue.js,所以就想用Vue.js来构建一个前端网站,这里code就不大篇 ...