使用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. REST接口设计

    REST接口设计 为什么要有REST 在传统上,软件和网络是两个不同的领域,很少有交集:软件开发主要针对单机环境,网络则主要研究系统之间的通信.互联网的兴起,使得这两个领域开始融合,现在我们必须考虑, ...

  2. 2018-12-25-win2d-图片水印

    title author date CreateTime categories win2d 图片水印 lindexi 2018-12-25 10:37:52 +0800 2018-03-19 08:3 ...

  3. shell函数的存储和显示

  4. Linux: 给右键菜单加一个“转换图片为jpg格式”

    Linux上通常都会安装imagemagick这个小巧但又异常强大的工具.这个软件提供了一系列很好用的功能.这里说一说如何使用它的convert命令转换图片为jpg格式,以及如何把它添加到Thunar ...

  5. vue 如何读取编译携带的参数

    vue 环境有很多套,我们需要根据不同环境设置不同的一些参数,如何不装任何依赖的情况下获取参数 下面是我制作官网,需要根据开发还是生产环境配置不同CDN,用vue-cli2+webpack,配置是再: ...

  6. Failed to resolve com.android.support:support-compat:25.4.0

    3down votefavorite   I am trying to include this library to my project by adding compile 'jp.wasabee ...

  7. @PathVariable、@RequestParam、@RequestBody注解

    讲解更加详细的参考资料 https://blog.csdn.net/u011410529/article/details/66974974 https://www.cnblogs.com/soul-w ...

  8. 启动数据库报：ORA-03113

    1启动数据库报:ORA-03113 2.查看oracle运行日志 tail  -50 //home/app/oracle/diag/rdbms/orcl/orcl/trace/alert_orcl.l ...

  9. 【leetcode】519. Random Flip Matrix

    题目如下: You are given the number of rows n_rows and number of columns n_cols of a 2D binary matrix whe ...

  10. 【多线程】ConcurrentLinkedQueue 的实现原理

    1. 引言 在并发编程中我们有时候需要使用线程安全的队列.如果我们要实现一个线程安全的队列有两种实现方式:一种是使用阻塞算法,另一种是使用非阻塞算法.使用阻塞算法的队列可以用一个锁(入队和出队用同一把 ...