使用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. setlocale - 设置当前的区域选项

    总览 (SYNOPSIS) #include <locale.h> char *setlocale(int category, const char * locale); 描述 (DESC ...

  2. 力扣—one plus（加一） python实现

    题目描述: 中文: 给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储单个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头 ...

  3. ubuntu下oracle 数据库安装

    环境:腾讯云 一. 由于腾讯云直接下载oracle太慢,先安装docker 1.sudo apt update 2.接下来,使用apt安装一些允许通过HTTPS才能使用的软件包: sudo apt i ...

  4. C 给定路径遍历目录下的所有文件

    在此之前需要了解 WIN32_FIND_DATA的结构 以及  FindFirstFile. FindNextFile原型以及用法注意事项传送门如下 https://msdn.microsoft.co ...

  5. TCP/IP的分层管理_01

    1.TCP/IP协议族里最重要的一点就是分层.TCP/IP协议族按层次分别分为以下4层:         应用层,传输层,网络层和数据链路层.           应用层:决定了向用户提供应用服务时通 ...

  6. testNG之异常测试

    @Test(expectedExceptions = ) 在测试的时候,某些用例的输入条件,预期结果是代码抛出异常,那么这个时候就需要testNG的异常测试,先看一段会抛出异常的代码 exceptio ...

  7. dubbo-monitor安装

    dubbo-monitor安装 cd /opt/tools/ #包目录 tar -C /opt/ -xf dubbo-monitor-simple--assembly.tar.gz cd dubbo- ...

  8. zabbix历史数据全部清楚

    #这种方法会出现 监控项不可用的情况 1.停掉zabbix_server 2.重重名表 RENAME TABLE history to history_20180117; RENAME TABLE h ...

  9. 前端每日实战：81# 视频演示如何用纯 CSS 创作一个变色旋转动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 此视频是可 ...

  10. nodejs操作消息队列RabbitMQ

    一. 什么是消息队列 消息队列(Message Queue,简称MQ),从字面意思上看,本质是个队列,FIFO先入先出,只不过队列中存放的内容是message而已.其主要用途:不同进程Process/ ...