使用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. 解压 xxxx.cpio.gz.u-boot

    xxxx.cpio.gz.u-boot 为 Ramdisk 文件. 是使用u-boot源码下 tools/mkimage 工具生成的. .u-boot = 64字节的头部信息 + Filesystem ...

  2. Spring MVC 配置Controller详解

    在SpringMVC中,对于Controller的配置方式有很多种,如下做简单总结 第一种 URL对应Bean如果要使用此类配置方式,需要在XML中做如下样式配置: <!-- 表示将请求的URL ...

  3. HDU-4003 Find Metal Mineral 树形DP (好题)

    题意:给出n个点的一棵树,有k个机器人,机器人从根节点rt出发,问访问完整棵树(每个点至少访问一次)的最小代价(即所有机器人路程总和),机器人可以在任何点停下. 解法:这道题还是比较明显的能看出来是树 ...

  4. 阿里云ssh免密登陆突然无效

    [root@node03 ~]# ssh-copy-id node02 root@node02's password: sh: .ssh/authorized_keys: Permission den ...

  5. Spring解决循环依赖

    1.Spring解决循环依赖 什么是循环依赖:比如A引用B,B引用C,C引用A,它们最终形成一个依赖环. 循环依赖有两种 1.构造器循环依赖 构造器注入导致的循环依赖,Spring是无法解决的,只能抛 ...

  6. BlueStore-先进的用户态文件系统《二》-BlueFS

    https://zhuanlan.zhihu.com/p/46362124 简介 上一篇文章中,介绍了BlueStore的诞生背景.逻辑架构以及设计思想,提到了在BlueStore中元数据都是存放在R ...

  7. 2019 牛客暑期多校 B generator 1 （矩阵快速幂+倍增）

    题目:https://ac.nowcoder.com/acm/contest/885/B 题意:给你x0,x1,让你求出xn,递推式时xn=a*xn-1+b*xn-2 思路:这个n特别大,我自己没有摸 ...

  8. 前端每日实战：77# 视频演示如何用纯 CSS 创作旗帜飘扬的动画

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

  9. windows下tomcat7+nginx1.8负载均衡

    1.负载平衡是一种常用的跨多个应用程序实例 技术优化资源利用率,最大化吞吐量, 减少延迟,并确保容错配置. 2.使用nginx作为非常有效的HTTP负载均衡器 将流量分发给几个应用程序服务器和改善 性 ...

  10. hive内部表&外部表介绍

    未被external修饰的是内部表(managed table),被external修饰的为外部表(external table):区别:内部表数据由Hive自身管理,外部表数据由HDFS管理:内部表 ...