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.今天我们主要介绍下复杂 ...
随机推荐
- Android 网络请求库volley的封装，让请求更方便
首先封装一下volley 请求 public class CustomRequest extends StringRequest { private static final String TAG = ...
- (转) cocos2dx 显示中文
cocos2dx 中文显示 分类: cocos2dx 2014-01-18 10:31 253人阅读 评论(0) 收藏 举报 目录(?)[+] 总结一句话,就是UTF-8编码. 1. 中文FNT字体文 ...
- python学习之认识字符串
1.打印字符串 >>> print ("hello world") hello world 2.使用“/"进行符号转义 >>> pri ...
- Cenos(6.6/7.1)下从源码安装Python+Django+uwsgi+nginx到写nginx的环境部署（一）
梳理下这几个的关系: centos是redhat的社区版操作系统. Python2.7.5是开发语言(centos6.5下自带的python是2.6.6版本,所以需要源码更新,而centos7.1下面 ...
- （淘宝无限适配）手机端rem布局详解（转载非原创）
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- java练习题（字符串类）：显示4位验证码、输出年月日、从XML中抓取信息
1.显示4位验证码 注:大小写字母.数字混合 public static void main(String[] args) { String s="abcdefghijklmnopqrstu ...
- IAR更改代码字体&快速模板设置。——Arvin
1.是用软件提供的字体 如果只想简单的设置,可进行如下设置Tools->IDE Options->Editor->Colors and Fonts->Editor Font-& ...
- ocLazyLoad angular 按需加载
ionic 框架 1.引用 index.html 加载 <script type="text/javascript" src="lib/oclazyload/ocL ...
- 尽可能保留原有数据，建立UEFI与BIOS双启PE优盘
尽可能保留原有数据,建立UEFI与BIOS双启PE优盘1.确保优盘或者移动硬盘有一个FAT32分区,如果没有FAT32分区,就用傲梅分区助手或者ppm转换一个现有的分区到FAT32分区0x0C,或者新 ...
- Creating Materials at runtime And Issue of Shader.Find()
Creating Materials at runtimehttp://forum.unity3d.com/threads/create-materials-at-runtime.72952/ //通 ...