编程练习

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

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

任务

第一步： 创建构建运算函数count()。

第二步： 获取两个输入框中的值和获取选择框的值。

提示：document.getElementById( id名 ).value 获取或设置 id名的值。

第三步： 获取通过下拉框来选择的值来改变加减乘除的运算法则。

提示：使用switch判断运算法则。

第四步：  通过 = 按钮来调用创建的函数，得到结果。

注意: 使用parseInt()函数可解析一个字符串,并返回一个整数。

<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
var s;
//获取第一个输入框的值
var one=document.getElementById("txt1").value;
//获取第二个输入框的值
var two=document.getElementById("txt2").value;
//获取选择框的值
var sel=document.getElementById("select").value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
switch(sel){
case "+":s=parseInt(one)+parseInt(two);
break;
case "-":s=parseInt(one)-parseInt(two);
break;
case "*":s=parseInt(one)*parseInt(two);
break;
case "/":s=parseInt(one)/parseInt(two);
}
//设置结果输入框的值
document.getElementById("fruit").value=s;
}
</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>

JavaScript 事件 编程练习的更多相关文章

  1. javascript 事件编程之事件（流，处理，对象，类型）

    1. 事件处理 1.1. 绑定事件方式 1)行内绑定 语法: //最常用的使用方式 <元素 事件="事件处理程序"> 2)动态绑定 //结构+样式+行为分离的页面(ht ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  4. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  5. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  6. JavaScript异步编程的主要解决方案—对不起，我和你不在同一个频率上

    众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...

  7. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  8. javascript异步编程的前世今生，从onclick到await/async

    javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...

  9. jquery css事件编程 尺寸设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. php 封装 知识点

    类由众多对象抽象出来的对象由类实例化出来的 成员变量成员方法成员属性 访问修饰符public 公有的protected 受保护的private 私有的 构造函数1.写法特殊2.执行时间特殊 面向对象的 ...

  2. mongodb防火墙配置

    http://ruby-china.org/topics/20128 https://docs.mongodb.com/manual/tutorial/configure-linux-iptables ...

  3. Delphi容器类之---TOrderedList、TStack、TQueue、TObjectStack、TObjectQueue

    TOrderedList.TStack.TQueue Contnrs单元还定义了其他三个类:TOrderedList.TStack.TQueue TOrderedList TOrderedList = ...

  4. centos 6.6 系统中配置sendmail和dovecot

    网上介绍sendmail的文章千百种,很少有跟着做下来一次成功的.多少都有些说的不准确的地方. 我给大家共享一下我经过实验环境测试,完全可行的方法. 1.软件准备 操作系统:centos6.6我选择c ...

  5. 安装hadoop+zookeeper ha

    安装hadoop+zookeeper ha 前期工作配置好网络和主机名和关闭防火墙 chkconfig iptables off //关闭防火墙 1.安装好java并配置好相关变量 (/etc/pro ...

  6. 关于SVN出现 svn working copy locked的原因及解决方法

    今天使用SVN时电脑卡住了,于是结束进程中断了SVN的操作,于是出现了如题问题, 产生这种情况大多是因为上次svn更新命令执行失败且被自动锁定了. 如果cleanup没有效果的话只好手动删除锁定文件. ...

  7. DNS枚举工具DNSenum

    DNS枚举工具DNSenum   DNSenum是一款非常强大的域名信息收集工具.它能够通过谷歌或者字典文件猜测可能存在的域名,并对一个网段进行反向查询.它不仅可以查询网站的主机地址信息.域名服务器. ...

  8. C#ListBox对Item进行重绘，包括颜色

    别的不多说了,上代码,直接看 首先设置这行,或者属性窗口设置,这样才可以启动手动绘制,参数有三个 Normal: 自动绘制 OwnerDrawFixed:手动绘制,但间距相同 OwnerDrawVar ...

  9. [MySQL+PHP] 触发器及存储过程等MySQL功能在PHP中实现的坑

    折腾了一下午,始终没有能搞定在PHP中编写事件. 因为业务需求,需要实现一个预操作的功能,即业务人员填写未来的某个要做某个操作.在这个日期到来之前,则一切照常. 想通过PHP编写MySQL Event ...

  10. [译]App Framework 2.1 （1）之 Quickstart

    最近有移动App项目,选择了 Hybrid 的框架Cordova  和  App Framework 框架开发. 本来应该从配置循序渐进开始写的,但由于上班时间太忙,这段时间抽不出空来,只能根据心情和 ...