JavaScript--编程练习1
使用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 num1=parseInt(document.getElementById("txt1").value);
//获取第二个输入框的值
var num2=parseInt(document.getElementById("txt2").value);
//获取选择框的值
var fuhao=document.getElementById("select").value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
var result;
switch(fuhao){
case "+":
result=num1+num2;
break;
case "-":
result=num1-num2;
break;
case "*":
result=num1*num2;
break;
case "/":
result=num1/num2;
}
//设置结果输入框的值
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>
==========================界面=========
JavaScript--编程练习1的更多相关文章
- Javascript编程风格
Douglas Crockford是Javascript权威,Json格式就是他的发明. 去年11月他有一个演讲(Youtube),谈到了好的Javascript编程风格是什么.我非常推荐这个演讲,它 ...
- javascript编程： JSON， Mapping, 回调
使用 Javascript 编程, 组合使用 JSON 数据格式,Mapping 和回调技术, 可以产生很强的表达效果. 在实际工作中, 总会有数据汇总的需求. 比如说, 取得了多个 device ...
- javascript编程的最佳实践推荐
推荐的javascript编程的最佳实践,摘要记录在这里: 可维护的代码保证代码的性能部署代码 1 可维护的代码1.1什么是维护的代码:可理解性——其他人可以接手代码并理解它的意图和一般途径,而无需原 ...
- Javascript编程模式（JavaScript Programming Patterns）Part 1.（初级篇）
JavaScript 为网站添加状态,这些状态可能是校验或者更复杂的行为像拖拽终止功能或者是异步的请求webserver (aka Ajax). 在过去的那些年里, JavaScript librar ...
- 实践javascript美术馆的小案例，学习到的东西还是蛮多的，包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等
javascript美术馆(改进2) 一.javascript编程过程中的好习惯 1.实现预留退路 js被禁掉,图片也可以显示出来,href属性带有图片路径 <script src=" ...
- 【HANA系列】SAP HANA XS使用JavaScript编程详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...
- 学习现代 JavaScript 编程的最佳教程
天天编码 , 版权所有丨本文标题:0.0 学习现代 JavaScript 编程的最佳教程 转载请保留页面地址:http://www.tiantianbianma.com/the-modern-java ...
- javascript编程思想
javascript编程开发修炼之道 提要文摘附注: 本文的核心内容是围绕javascript前端开发的编程技术要素,来深入地探讨编写高质量的javascript代码的方法.技巧.规范和最佳实践, ...
- 《JavaScript编程实战》
<JavaScript编程实战> 基本信息 原书名:JavaScript programming: pushing the limits 作者: (美)Jon Raasch 译者: 吴海星 ...
- Dojo Javascript 编程规范(转)
前言 相当不错的 Javascript 编程风格规范,建议大家采用此规范编写 Javascript.原文链接: http://dojotoolkit.org/developer/StyleGuide ...
随机推荐
- Linux—Ubuntu14.0.5配置JAVA环境
1. 前往ORACLE官网下载最新版本的Java JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html,默认下载 ...
- 【tips】xadmin - django第三方后台管理系统
Django 为大家提供了一个完善的后台管理系统—admin,但是这个后台管理系统总体来说不太适合国人的习惯,所以有大神就使用 bootstrap 和 jQuery,为我们开发了一个第三 方的 Dja ...
- LES on Wind turbine
- Jet --theory
(FIG. 6. A caricature of turbulent jet and the entrainment., Jimmy, 2012) Ref: Jimmy Philip, Phys. F ...
- C# 解决EXCEL单元格合并,行高无法自适应问题
解决方法:根据单元格内容长度,设置单元格所在行的行高 public static float getExcelCellAutoHeight(string strtest, float fontCoun ...
- HashMap源码分析2：扩容
本文源码基于JDK1.8.0_45. final Node<K,V>[] resize() { Node<K,V>[] oldTab = table; int oldCap = ...
- Java虚拟机深入JVM内核—原理、诊断与优化视频教程
http://www.eimhe.com/forum.php?mod=viewthread&tid=142832&highlight=%C4%DA%BA%CB
- mysql Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’
mysql Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’ 今天在linux中安装了mys ...
- ubuntu Shell
Ubuntu下的ShellUbuntu的图形界面也是运行在Shell下的:虚拟终端机开启:Ctrl+Alt+F1~ F6 可以开启6个命令行的ShellCtrl+Alt+F7 开启图形终端机命令su ...
- express 不是内部或外部命令（windows）解决方式
请环境变量设置 注意 "D:\soft\nodejs\"这个是笔者自己安装在电脑上的node js文件夹,请改动成自己的 假设安装的express是4.X就要安装 express- ...