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.今天我们主要介绍下复杂 ...
随机推荐
- 详解 Array.prototype.slice.call(arguments)
首先,slice有两个用法,一个是String.slice,一个是Array.slice,第一个返回的是字符串,第二个返回的是数组 在这里我们看第二个方法 1.在JS里Array是一个类 slice是 ...
- 33、mybatis（二）
第十六章回顾SQL99中的连接查询 1)内连接 2)外连接 3)自连接 第十七章回顾hibernate多表开发 1)一对一 2)一对多 3)多对多 第十八章 mybatis一对一映射[学生与身份证] ...
- Web_add_header
如果你发现所有的HTTP send请求都缺少头数据包,在脚本中的开头添加web_add_auto_header(”XXXXX“,”yyyy“);随着web_add_auto_header的添加,你不需 ...
- 8-JS闭包、回调实例
1.回调 javascipt中,函数回调一般用于以下几种场景: 1.异步执行(例如读取文件,进行HTTP请求) 2.同步(阻塞) 3.事件监听和处理 4.设置超时和时间间隔的方法 异步例子(使用AJA ...
- Balsamiq Mockups 注册码
Blacklist: Organization name: Rick DongSerial Key: eNrzzU/OLi0odswsqgnKTM5WcMnPS1eoMTQyMjexMDQyAIEa5 ...
- ubuntu如何以删除文件夹？
rm [选项] 文件 -f, --force 强力删除,不要求确认 -i 每删除一个文件或进入一个子目录都要求确认 -I 在删除超过三个文件或者递归删除前要求确认 -r, -R 递归删除子目录 -d, ...
- C#读取XML文件中有乱码的处理办法
1.以文本的方式读取出xml内容 2.如果xml加载文本失败,替换掉乱码的内容 private static void loadxml(XmlDocument doc, string str) { t ...
- Export Data from mysql Workbench 6.0
原文地址:export-data-from-mysql-workbench-6-0 问题描述 I'm trying to export my database, using MySQL Workben ...
- LTE Module User Documentation（翻译11）——配置用户测量
LTE用户文档 (如有不当的地方,欢迎指正!) 17 Configure UE measurements 仿真中激活的用户测量配置取决于所选的 “consumers”,例如切换算法.用户可能需要添 ...
- 某篇ctr预估ppt的链接
csdn上面有一篇ppt,但是下载分太贵了.里面东西看起来讲的还可以.看看能不能嵌入. http://download.csdn.net/detail/u012289698/9371461 <i ...