javascript计算器的实现，暂时不支持小数点
2015-10-30 14:33
597 查看
4000
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="calculator.css">
<script language="javascript">
var count = 0;//总值
var operType = "";//操作符
var num = 0;//第二个计算数
var jilu = "";//保存显示的文本;
/* 传入按钮的id属性
*/
function view(operationid){
/* 初始值 */
var result = 0;
/* 得到id的Element */
var type = getE(operationid);
/*判断按钮类型，这里分为三类,数字及小数点等运算符清零*/
if(type.value == "清零"){
count = 0;
num = 0;
jilu = "";
showText(0);
return;
}
if(type.value == "\/"){
if(operType == 1){
count = count + num;
}else if(operType == 2){
count = count - num;
}else if(operType == 3){
count = count * num;
}else if(operType == 4){
count = count / num;
}else{
count = num;
}
operType = 4;
jilu = jilu + num + "\/";
showText(jilu);
num = 0;
return;
}
if(type.value == "*"){
if(operType == 1){
count = count + num;
}else if(operType == 2){
count = count - num;
}else if(operType == 3){
count = count * num;
}else if(operType == 4){
count = count / num;
}else{
count = num;
}
operType = 3;
jilu = jilu + num + "*";
showText(jilu);
num = 0;
return;
}
if(type.value == "+"){
if(operType == 1){
count = count + num;
}else if(operType == 2){
count = count - num;
}else if(operType == 3){
count = count * num;
}else if(operType == 4){
count = count / num;
}else{
count = num;
}
/* 测试断点用*/
var test = count;
test = num
operType = 1;
jilu = jilu + num + "+";
showText(jilu);
num = 0;
return;
}
if(type.value == "-"){
if(operType == 1){
count = count + num;
}else if(operType == 2){
count = count - num;
}else if(operType == 3){
count = count * num;
}else if(operType == 4){
count = count / num;
}else{
count = num;
}
operType = 2;
jilu = jilu + num + "-";
showText(jilu);
num = 0;
return;
}
if(type.value == "="){
if(operType == 1){
count = count + num;
}else if(operType == 2){
count = count - num;
}else if(operType == 3){
count = count * num;
}else if(operType == 4){
count = count / num;
}
num = 0;
jilu = count;
showText(count);
return;
//alert(count);
}
var element = getE(operationid);
var str = element.value;
if(result != 0){
alert(0);
}
num = num * 10 + parseInt(str);
showText(jilu + num);
}
/*根据id返回Element*/
function getE(id){
return document.getElementById(id);
}
function showText(result){
getE('result').value = result;
}
</script>
<title>无标题文档</title>
</head>
<body>
<!-- 主要div的实现 -->
<div id = main>
<!-- 页头div的实现 -->
<div id = "top">
</div>
<!-- 左侧div -->
<div id="left">
</div>
<!--中间大的div-->
<div id="center">
<!-- 中间计算器div -->
<div id="calculator">
<div class="input">
<input type="text" size="36" class="text" id="result" value="0">
</div>
<!-- 数据按钮整块的DIV -->
<div class="numberdiv">
<!-- 中间c/*7894561230.按钮的div -->
<div class="numberbtncenter">
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="清零" onClick="view('zero')" id="zero">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="/" onClick="view('chu')" id="chu">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="*" onClick="view('cheng')" id="cheng">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="7" onClick="view('seven')" id="seven">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="8" onClick="view('eight')" id="eight">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="9" onClick="view('nine')" id="nine">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="4" onClick="view('four')" id="four">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="5" onClick="view('five')" id="five">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="6" onClick="view('six')" id="six">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="1" onClick="view('one')" id="one">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="2" onClick="view('two')" id="two">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="3" onClick="view('three')" id="three">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtncols2">
<input type="button" value="0" onClick="view('num0')" id="num0">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value=".">
</div>
</div>
<!--右侧—+enter -->
<div class="numberbtnright">
<!-- 单个数字按钮div -->
<div class="numberbtn">
<input type="button" value="-" onClick="view('sub')" id="sub">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtnrow2">
<input type="button" value="+" onClick="view('add')" id="add">
</div>
<!-- 单个数字按钮div -->
<div class="numberbtnrow2">
<input type="button" value="=" onClick="view('deng')" id="deng">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>body{
margin:0px;
padding:0px;
}
/* 主要的大的DIV */
#main{
margin:0 auto;
padding:0px;
width:960px;
height:800px;
border:solid 1px red;
}
/* 顶部DIV */
#main #top{
margin:20px auto 0px;
width:98%;
height:10%;
border:solid 1px red;
}
/* 左侧div */
#main #left{
margin-top:10px;
margin-left:10px;
width:10%;
height:75%;
border:solid 1px red;
float:left;
}
/* 中间大的DIV */
#main #center{
margin-top:10px;
margin-left:15px;
width:86%;
height:75%;
border:solid 1px red;
float:left;
text-align:center;
}
/*计算器主DIV*/
#main #center #calculator{
margin:50px auto;
width:300px;
height:400px;
border:1px solid red;
}
/*输入框DIV*/
#calculator .input{
margin-top:10px;
height:40px;
padding:0px;
border:1px solid red;
}
/*输入框DIV*/
#calculator .input .text{
text-align:right;
height:36px;
padding:0px;
line-height:36px;
font-size:14px;
//border:1px solid red;
}
/* 全部按钮的DIV */
#calculator .numberdiv{
margin:20px auto 0px;
width:80%;
height:78%;
padding:0px;
border:1px solid red;
}
/* 左侧div */
.numberbtncenter{
margin-top:0px;
margin-left:5px;
width:174px;
height:300px;
//border:1px solid red;
float:left;
}
/*左侧div单个数字按钮div*/
.numberbtncenter .numberbtn{
width:50px;
height:50px;
//border:1px solid red;
margin-left:6px;
margin-top:6px;
float:left;
}
/* 左侧div单个数字按钮div下面的按钮 */
.numberbtncenter .numberbtn input{
width:100%;
height:100%;
float:left;
}
/* 左侧div下面的两列的0的div */
.numberbtncenter .numberbtncols2{
width:106px;
height:50px;
//border:1px solid red;
margin-left:6px;
margin-top:6px;
float:left;
}
/* 左侧div，0div 下的0按钮 */
.numberbtncenter .numberbtncols2 input{
width:100%;
height:100%;
float:left;
}
/* 右侧div */
.numberbtnright{
margin-top:0px;
width:58px;
height:300px;
//border:1px solid red;
float:left;
}
/* 右侧div下的单个按钮div */
.numberbtnright .numberbtn{
width:50px;
height:50px;
//border:1px solid red;
margin-left:0px;
margin-top:6px;
float:left;
}
/* 右侧div下的单个按钮div 下的 input*/
.numberbtnright .numberbtn input{
width:100%;
height:100%;
float:left;
}
/* 右侧div下的单个按钮div */
.numberbtnright .numberbtnrow2{
width:50px;
height:106px;
//border:1px solid red;
margin-left:0px;
margin-top:6px;
float:left;
}
/* 右侧div下的单个按钮div 下的input*/
.numberbtnright .numberbtnrow2 input{
width:100%;
height:100%;
float:left;
}
功能还不完善，就当学习笔记了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript编程风格
- JSP传入后台 中文乱码问题
- Echarts 力导向布局图扩展插件--Kforce.js。
- JavaScript中的定时器之Item23的合理使用
- fastjson其他常用方法
- 学习JavaScript 6个技巧 提高效率
- javascript字符串与数组练习
- JavaScript刷新页面
- js-ajax相关基础知识整理
- org.json.JSONArray#remove
- js小例子（多字溢出，省略号表示）
- javascript字符串替换函数如何一次性全部替换掉
- JS实现复制粘贴功能
- js时间比较
- SuperMap iClient for JavaScript 时空数据动画的实现
- js替换文章中的文字
- js小例子（标签页）
- jsp页面的刷新操作
- jsp页面的跳转问题
- JS常用状态