使用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. 【知识强化】第六章 查找 6.3 B树和B+树

    本节课我们来学习本章的第一个难点,就是B树.那么B树它其实是一种数据结构,我们设计出这种数据结构就是为了提高我们的查找效率的,提高我们在磁盘上的查找效率.那么什么是B树呢?了解B树之前,我们先来回忆一 ...

  2. RxJava总结（原）

    1.RxJava的作用 RxJava is a Java VM implementation of Reactive Extensions: a library for composing async ...

  3. dosbox下载并配置BC3.1及环境变量的方法

    https://www.tuicool.com/articles/v2A3mm--Win8下用DOSBox编写汇编语言 http://www.dosbox.com/ http://www.masm32 ...

  4. swagger2 官网配置

    <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2& ...

  5. Python--nfs服务+计划任务crond服务+shell介绍

    nfs服务 NFS 是Network File System的缩写,即网络文件系统. 功能是通过网络让不同的机器.不同的操作系统能够彼此分享个别的数据,让应用程序在客户端通过网络访问位于服务器磁盘中的 ...

  6. Ceph BlueStore与FileStore：利用Micron NVMe SSD进行性能比较

    https://www.micron.com/about/blog/2018/may/ceph-bluestore-vs-filestoreblock-performance-comparison-w ...

  7. jdbc 数据库批处理insert操作

    package blob; import java.sql.Connection; import java.sql.PreparedStatement; import jdbc.utils.*; // ...

  8. 88、展示Tensorflow计算图上每个节点的基本信息以及运行时消耗的时间和空间

    ''' Created on May 24, 2017 @author: p0079482 ''' #使用程序输出日志 import tensorflow as tf with tf.Session( ...

  9. js关闭当前页面清除session

    js关闭当前页面清除session 普通页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  10. js 中 !!的用法

    !!是将表达式强制转化为bool值的运算,运算结果为true或false,表达式是什么值,结果就是对应的bool值,不再取非. 不是取非再取非的意思!!! !!false=false;    要注意f ...