JavaScript基础--简单功能的计算器(十一)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="calc.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
//计算机累加总数，表示第一个数
var sum =0;
//第二个数
var num1 =0;
//操作符
var oper; function getBtn(obj){ var res = document.getElementById("display");
switch(obj.value){
case "1":
//连着按数字，拼接字符串，例如：111
res.value += obj.value;
break;
case "2":
res.value += obj.value;
break;
case "3":
res.value += obj.value;
break;
case "4":
res.value += obj.value;
break;
case "5":
res.value += obj.value;
break;
case "6":
res.value += obj.value;
break;
case "7":
res.value += obj.value;
break;
case "8":
res.value += obj.value;
break;
case "9":
res.value += obj.value;
break;
case "0":
res.value = parseInt(0);
break;
case "+":
//获取用户按的第一个数字和操作符
getOperAndNum2Value((parseInt(res.value)),"+");
break;
case "-":
getOperAndNum2Value((parseInt(res.value)),"-");
break;
case "*":
getOperAndNum2Value((parseInt(res.value)),"*");
break;
case "/":
getOperAndNum2Value((parseInt(res.value)),"/");
break;
case "=":
//获取用户当前按的第二个数字
num1 = parseInt(res.value);
//调用函数计算结果
showResult(sum,num1,oper);
break;
case "POWER":
sum = parseInt(res.value);
//一个数的N次方，开方
sum *=sum;
document.getElementById("display").value = sum;
break;
case "Clear":
document.getElementById("display").value = "";
break;
case "Back":
sum = res.value;
if(sum.length>0){
sum = parseInt(sum.substring(0,sum.length-1));
document.getElementById("display").value = sum;
}
break;
default:
window.alert("没有这个按键！");
break;
}
} //计算结果
function showResult(num1,num2,op){
switch(op){
case "+":
sum = num1 + num2;
break;
case "-":
sum = num1 -num2;
break;
case "*":
sum = num1 * num2;
break;
case "/":
if(num1!=0){
sum = num1 / num2;
}
}
document.getElementById("display").value = sum;
} //给操作符和第一个数赋值,点击操作符号后，清空显示栏
function getOperAndNum2Value(num2,op){
oper = op;
sum = parseInt(num2);
document.getElementById("display").value ="";
}
</script>
</head> <body>
<table width="250" border="1" cellspacing="0" cellpadding="0">
<tr style="background-color:#000099">
<td colspan="4" align="center"><input type="text" id="display" class="show"/></td>
</tr>
<tr>
<td width="63"><input type="button" value="POWER" onclick="getBtn(this)" /></td>
<td width="63"><input type="button" value="Clear" onclick="getBtn(this)"/></td>
<td width="63"><input type="button" value="Back" onclick="getBtn(this)"/></td>
<td width="51"> </td>
</tr>
<tr>
<td><input type="button" value="1" class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="2" class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="3" class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="4" class="button" onclick="getBtn(this)"/></td>
</tr>
<tr>
<td><input type="button" value="5" class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="6" class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="7" class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="8" class="button" onclick="getBtn(this)"/></td>
</tr>
<tr>
<td><input type="button" value="9" class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="0" class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="." class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="=" class="button" onclick="getBtn(this)"/></td>
</tr>
<tr>
<td><input type="button" value="+" class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="-" class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="*" class="button" onclick="getBtn(this)"/></td>
<td><input type="button" value="/" class="button" onclick="getBtn(this)"/></td>
</tr>
</table>
</body>
</html>
calc.css
/* CSS Document */
.show{
width:140px;
height:20px;
} .button{
width:58px;
}
计算器界面如下：
JavaScript基础--简单功能的计算器(十一)的更多相关文章
- 一个简单的、面向对象的javascript基础框架
如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...
- 完成一段简单的Python程序，用于实现一个简单的加减乘除计算器功能
#!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...
- python库的tkinter带你进入GUI世界(计算器简单功能)
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 一个处女座的程序猿 PS:如有需要Python学习资料的小伙伴可以加 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- Javascript基础回顾 之(一) 类型
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- 第三篇：web之前端之JavaScript基础
前端之JavaScript基础 前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
- javascript基础修炼(2)——What's this(上)
目录 一.this是什么 二.近距离看this 三. this的一般指向规则 四. 基本规则示例 五. 后记 开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一.thi ...
- 2、JavaScript 基础二 （从零学习JavaScript）
11.强制转换 强制转换主要指使用Number.String和Boolean三个构造函数,手动将各种类型的值,转换成数字.字符串或者布尔值. 1>Number强制转换 参数为原始类型值的转换规 ...
- 一步步学习javascript基础篇（3）：Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
随机推荐
- 安装appcan后打开eclipse出错
原有eclipse,后安装appcan后打开eclipse出错,因为appcan是自带的编译器也是eclipse所以会产生冲突,只需要在环境变量path里面把java_home参数移到appcan参数 ...
- Android 网络请求库volley的封装，让请求更方便
首先封装一下volley 请求 public class CustomRequest extends StringRequest { private static final String TAG = ...
- String s ; 和 String s = null ; 和 String s = "" ; 的却别
String s ;该语句表示只是声明了一个引用变量,但是并没有初始化引用,所以对变量s的任何操作(除了初始化赋值外) 都将引发异常. String s=null; 表示未申请任何内存资源,即此语句表 ...
- gfortran编译Fortran数组问题
可能是IVF(inter visual fortran)比LF(lahey Fortran)编译器比较严格的原因 real :: A(L,M) = (/ 1,2,3,4,5,6,7,8,9,10,11 ...
- mybatis代码生成（generator工具生成代码）
generator工具生成代码 下载地址 http://pan.baidu.com/s/1bY8C0I
- WebRequest使用
// 待请求的地址 string url = "http://www.cnblogs.com"; // 创建 WebRequest 对象,WebRequest 是抽象类,定义了请求 ...
- JAVA线程同步辅助类Exchanger-交换
可以在对中对元素进行配对和交换的线程的同步点.每个线程将条目上的某个方法呈现给 exchange 方法,与伙伴线程进行匹配,并且在返回时接收其伙伴的对象.Exchanger 可能被视为 Synchro ...
- ms sql 经典语句【珍藏】
数据库中字段中有不需要"[演示数据请勿真实购买]" 例如: update Hishop_Products set ProductName = replace(ProductName ...
- Bootstrap_下拉菜单
在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件. 一.普通下拉菜单 <div class="dropdown"&g ...
- awk命令简单介绍
简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...