JavaScript计算器

最新推荐文章于 2024-04-29 17:01:02 发布

红袖疯子

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量814

点赞数 1

文章标签： javascript button class function html stylesheet

本文链接：https://blog.csdn.net/leconomy/article/details/5960971

版权

一、 web 简单计算器简介

web 简单计算器是由 HTML ， CSS ， JavaScript 技术实现的，其中 HTML ， CSS 主要实现界面， JavaScript 实现功能。此计算器包括三个文件，一是 HTML 文件，二是 CSs 文件，三是 JavaScript 文件。用此计算器可计算器简单的加、减、乘、除四则运算，其中最大能计算 13 位数，计算结果超过 13 位会显示出科学计数法。

二、主要文件

包含calc.htm,calc.css,calc.js三个文件

三、文件内容

calc文件的主要内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> WEB简单计时器 </TITLE> <link href="calc.css" mce_href="calc.css" type="text/css" rel="stylesheet" /> <mce:script type="text/javascript" src="calc.js" mce_src="calc.js"></mce:script> </HEAD> <BODY> <div id="container"> <div id="title"></div> <div class="grid-c4"></div> <div class="grid-c4-center"> <form action="#" method="post"> <input type="text" id="calc" value="0" /> <input type="button" class="columnFirst" value="/" οnclick="(new operator())._operator(4)" /> <input type="button" class="column" value="*" οnclick="(new operator())._operator(3)" /> <input type="button" class="column" value="-" οnclick="(new operator())._operator(2)" /> <input type="button" class="columnLast" value="+" οnclick="(new operator())._operator(1)" /> <input type="button" class="columnFirst" value="7" οnclick="(new clickNumber())._clickNumber(7)" /> <input type="button" class="column" value="8" οnclick="(new clickNumber())._clickNumber(8)" /> <input type="button" class="column" value="9" οnclick="(new clickNumber())._clickNumber(9)" /> <input type="button" class="columnLast" value="<" οnclick="(new back())._back()" /> <input type="button" class="columnFirst" value="4" οnclick="(new clickNumber())._clickNumber(4)" /> <input type="button" class="column" value="5" οnclick="(new clickNumber())._clickNumber(5)" /> <input type="button" class="column" value="6" οnclick="(new clickNumber())._clickNumber(6)" /> <input type="button" class="columnLast" value="C" οnclick="(new control())._control()"/> <input type="button" class="columnFirst" value="1" οnclick="(new clickNumber())._clickNumber(1)" /> <input type="button" class="column" value="2" οnclick="(new clickNumber())._clickNumber(2)" /> <input type="button" class="column" value="3" οnclick="(new clickNumber())._clickNumber(3)" /> <input type="button" id="equal" value="=" οnclick="(new calculat())._calculat()" /> <input type="button" class="columnFirst" value="." οnclick="(new clickNumber())._clickNumber(this.value)" /> <input type="button" id="zero" value="0" οnclick="(new clickNumber())._clickNumber(0)" /> </form> </div> <div class="grid-c4"></div> </div> </BODY> </HTML>

calc.css文件的主要内容如下：

html,body{ width:100%; height:410px ; margin:0 auto; padding:0 ; text-align:center ; } #container{ width:960px; height:404px ; margin:0 auto; padding:0 ; background:#DDDDDD ; } /*定义标题的样式*/ #title{ width:948px; height:148px; margin:10px 5px ; background:url(logo.gif) ; border:1px solid #f89d9d ; } /*.columnFirst为每行开头button的样式 *.column为每行中间button的样式 *.columnLast为每行最后button的样式 */ .columnFirst,.column,.columnLast{ width:70px; height:30px; margin:5px ; background:#FF0 ; float:left ; } .columnFirst{ margin-left:0; } .columnLast{ margin-right:0; } /*等号的样式*/ #equal{ width:70px; height:70px; margin:5px 0 5px 5px ; float:right; background:#FF0 ; } /*0的样式*/ #zero{ width:150px; height:30px; margin:5px ; float:left ; background:#FF0 ; } /*栅格布局有4各column*/ .grid-c4,.grid-c4-center{ width:310px; height:230px; margin:10px 5px ; float:left ; display:inline ; } .grid-c4{ background:#FF0 url(name.jpg) no-repeat; } .grid-c4-center{ background:#F00 } /*输入框的样式*/ #calc{ width:310px; height:30px; text-align:right ; } #calc,.columnFirst,.column,.columnLast,#equal,#zero{ font-size:20px; font-weight:bold ; }

calc.js文件的主要内容如下：

var numberOne ;// 运算符左边的数 var numberTwo ;// 运算符右边的数 var newNum=true ;// 判断是否是新数 var sbol = 0 // 作为公共标识 function clickNumber(){ } clickNumber.prototype={ _clickNumber:function(value){ var oCalc = document.getElementById('calc') ; var oLength = oCalc.value.length ; this.value = value ; if(newNum == true){ oCalc.value = '' ; oCalc.value = this.value ; } if(this.value == '.'){ if(oCalc.value.indexOf(".") != -1){ // 已经有小数点 oCalc.value += ''; }else{ // 没小数点 oCalc.value += '.' ; } /*第一次输入为小数点*/ if(oCalc.value.indexOf(".") == 0){ oCalc.value = "0." ; } } // 第一个数为零，第二个数不为小数点 if(oCalc.value.indexOf("0") == 0 && oCalc.value.indexOf(".") != 1){ oCalc.value = oCalc.value.substring(0,1) ; } if(newNum == false && this.value != '.'){ // 继续输入第一个数且输入的不是小数点 oCalc.value += this.value ; } if(oLength >= 13){ oCalc.value = oCalc.value.substring(0,13) ; } newNum = false ; } } // 接受操作运算符的函数 function operator(){ } operator.prototype={ _operator:function(symbol){ var oCalc = document.getElementById('calc') ; if(sbol != 0) (new calculat())._calculat() ; // 连续运算 numberOne = oCalc.value ; sbol = symbol ; // 运算符赋给全局表里sbol newNum = true ; // 第一个数据输入结束，输入第二个数据 //var result = (new calculat())._calculat(sbol) ; //numberOne = result ; } } function calculat(){ } calculat.prototype={ _calculat:function(){ var oCalc = document.getElementById('calc') ; var result ; numberTwo = oCalc.value ; if(numberOne != undefined && numberTwo != undefined){ /* 接受操作运算符 * 1表示加 * 2表示减 * 3表示乘 * 4表示除 */ switch(sbol){ case 1: result=parseFloat(numberOne) + parseFloat(numberTwo); break ; case 2: result=parseFloat(numberOne) - parseFloat(numberTwo); break ; case 3: result=parseFloat(numberOne) * parseFloat(numberTwo); break ; case 4: if(numberTwo != 0){ result=parseFloat(numberOne) / parseFloat(numberTwo); }else{ result = "除数不能为0" } break ; default: result = oCalc.value; } // 数据长度大于13位 if(result >= 9999999999999){ var resultLen = result.toString().length-1 ; // 结果长度 var p = Math.pow(10,resultLen) ;// 10的幂 // 结果用科学计数法表示 result = (result/p).toString().substring(0,13) + "e+" + resultLen ; } oCalc.value = result ; } newNum = true ; sbol=0 ; return result ; } } // 置初始值为0 function control(){ } control.prototype={ _control:function(){ var oCalc = document.getElementById("calc") ; oCalc.value = 0 ; newNum = true ; sbol = 0 ; } } // 退格功能 function back(){ } back.prototype={ _back:function(){ var oCalc = document.getElementById("calc") ; var oLength = oCalc.value.length ; if(oLength > 0){ oLength -- ; oCalc.value = oCalc.value.substring(0,oLength) ; } if(oLength == 0){ oCalc.value = 0 ; newNum = true ; } } }

四、说明

代码全是我用手敲出来的，借鉴了别人的思想。以后多多努力

红袖疯子

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript计算器

<br />一、web简单计算器简介<br /> web简单计算器是由HTML，CSS，JavaScript技术实现的，其中HTML，CSS主要实现界面，JavaScript实现功能。此计算器包括三个文件，一是HTML文件，二是CSs文件，三是JavaScript文件。用此计算器可计算器简单的加、减、乘、除四则运算，其中最大能计算13位数，计算结果超过13位会显示出科学计数法。<br /> <br />二、主要文件<br /> 包含calc.htm,calc.css,calc.
复制链接

扫一扫