首页 > 代码库 > 用JS写一个计算器
用JS写一个计算器
<!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>JS简单计算器</title>
</head>
<style type="text/css">
table{
text-align:center;
}
input#input{
text-align:right;
background:#fff;
border:1px solid #ccc;
width:150px;
}
input{
width:150px;
height:30px;
}
#textfield4{
width:300px;
}
</style>
<body>
<table width="80%" border="1" cellpadding="5" cellspacing="0" bordercolor="#ccc">
<tr>
<td colspan="4" align="right">直观显示计算效果：
<input name="textfield1" type="text" id="textfield1" value="http://www.mamicode.com/0" size="25" maxlength="100" readonly="" />
<span id="fuhao"> </span>
<input name="textfield2" type="text" id="textfield2" size="25" maxlength="100" readonly="" />
<span id="eq"> = </span>
<input name="textfield3" type="text" id="textfield3" size="25" maxlength="100" readonly="" /></td></tr>
</table>
<br />
<table width="80%" border="1" cellpadding="5" cellspacing="0" bordercolor="#ccc">
<tr>
<td colspan="4" align="right">
一般的计算器显示效果：
<input id="textfield4" type="text" value="http://www.mamicode.com/0" size="100" maxlength="100" readonly=""/></td></tr>
</table>
<br />
<table width="80%" border="1" cellpadding="5" cellspacing="0" bordercolor="#ccc" id="btn_div">
<tr>
<td width="25%" ><input type="button" name="Submit" value="http://www.mamicode.com/0" id="zero" /></td>
<td width="25%" ><input type="button" name="Submit2" value="http://www.mamicode.com/1" id="one"/></td>
<td width="25%" ><input type="button" name="Submit3" value="http://www.mamicode.com/2" id="two" /></td>
<td width="25%" ><input type="button" name="Submit20" value="http://www.mamicode.com/删除" id="del" /></td>
</tr>
<tr>
<td ><input type="button" name="Submit4" value="http://www.mamicode.com/3" id="three"/></td>
<td ><input type="button" name="Submit5" value="http://www.mamicode.com/4" id="four"/></td>
<td ><input type="button" name="Submit6" value="http://www.mamicode.com/5"id="five" /></td>
<td ><input type="button" name="Submit19" value="http://www.mamicode.com/重置" id="reset"/></td>
</tr>
<tr>
<td ><input type="button" name="Submit7" value="http://www.mamicode.com/6" id="six"/></td>
<td ><input type="button" name="Submit8" value="http://www.mamicode.com/7" id="seven"/></td>
<td ><input type="button" name="Submit9" value="http://www.mamicode.com/8" id="eight"/></td>
<td ><input type="button" name="Submit18" value="http://www.mamicode.com/." id="dot" /></td>
</tr>
<tr>
<td ><input type="button" name="Submit10" value="http://www.mamicode.com/9" id="nine"/></td>
<td ><input type="button" name="Submit11" value="http://www.mamicode.com/+" id="add"/></td>
<td ><input type="button" name="Submit12" value="http://www.mamicode.com/-" id="sub"/></td>
<td ><input type="button" name="Submit17" value="http://www.mamicode.com/绝对值"id="abs" /></td>
</tr>
<tr>
<td ><input type="button" name="Submit13" value="http://www.mamicode.com/%" id="mod"/></td>
<td ><input name="Submit14" type="button" value="http://www.mamicode.com/×" id="cheng"/></td>
<td ><input type="button" name="Submit15" value="http://www.mamicode.com/÷" id="chu"/></td>
<td ><input type="button" name="Submit16" valuehttp://www.mamicode.com/="=" id="deng"/></td>
</tr>
</table>
<p>
<script type="text/javascript">
var EventUtil = {//建新对象
addHandler:function(element,type,func){//添加事件
if(element.addEventListener){
element.addEventListener(type,func,false);
}else if(element.attachEvent){
element.attachEvent("on"+ type,func);
}else{
element["on"+ type] = func;
}
},
getEvent:function(event){//获取Event对象
return event?event:window.event;
},
getTarget:function(event){//获得事件目标
return event.target || event.srcElement;
},
preventDefault:function(event){//阻止事件的默认行为
if(event.preventDefault){
return event.preventDefault();//非IE
}else{
event.returnValue = http://www.mamicode.com/false;//IE
}
},
removeHandler:function(element,type,func){//取消事件
if(element.removeEventListener){
element.removeEventListener(type,func,false);
}else if(element.detachEvent){
element.detachEvent("on"+ type,func);
}else{
element["on"+ type] = null;
}
},
stopPropagation:function(event){//取消事件的冒泡
if(event.stopPropagation){
event.stopPropagation();//非IE
}else{
event.cancelBubble = true;//IE
}
}
};
var input4 = document.getElementById("textfield4"),
input1 = document.getElementById("textfield1"),
input2 = document.getElementById("textfield2"),
input3 = document.getElementById("textfield3"),
f_span = document.getElementById("fuhao"),
fuhao = "",//记录算数符号
fuhao1 = "",
str1 = "",
str2 = "",
str3 = "",
str5 ="",
clk = 0,//计算次数
reg1 = /^-?[1-9]\d*\.?\d*$/,//除以0开头的数字的格式
reg2 = /^-?0(?!\d)\.?\d*$/,//以0开头的小数,0后面不能跟数字，(?!\d)表示0后面不跟数字，但是不占位，用[^\d]就不行，它无论如何会匹配一个字符0..123也匹配。
reg3 = /^-?0{2,}/,//0出现2次或者更多
reg4 = /^-$/,//负号重复2次或者更多
str4 = false,//判断计算符号是否被点击
input4_str="";//input4.value;
var clickNum = function(){
var value = http://www.mamicode.com/this.value;
if(!str4){//算数符号未点击，此时输入的数字赋值给str1
if(/[0-9]|\./.test(value)){//只允许输入数字和小数点
if(clk == 2){
str1 = "";//点击=号后如果直接点击数字按钮则清空STR1，str2,重新开始一个新的计算
str2 = "";
clk = 0;
}
if(reg1.test(str1+value) || reg2.test(str1 + value)){//判断输入的数字格式
if(!reg3.test(str1 + value )){//不能连续输入多个0
str1 += value;//赋值到数值1
input4.value = http://www.mamicode.com/str1;
input1.value = http://www.mamicode.com/str1;
}
}
}
}else{//算数符号已点击,此时赋值给str2
if(/[0-9]|\./.test(value)){
if(reg1.test(str2+value) || reg2.test(str2 + value)){//判断输入的数字格式
if(!reg3.test(str2 + value )){//不能连续输入多个0
str2 += value;//赋值到数值1
input4.value = http://www.mamicode.com/str2;
input2.value = http://www.mamicode.com/str2;
}
}
}
}
if(value =http://www.mamicode.com/="绝对值"){
if(input4.value != ""){
str5 = input4.value;
str5 = str5 - 0;
str5 = Math.abs(str5);
input4.value = http://www.mamicode.com/str5;
input3.value = http://www.mamicode.com/str5;
}
}
if(/[%+×÷-]/.test(value) && str2 == ""){//判断输入的值为算数符号加减乘除时要做的事
if(str1 != "" && str1 !="-"){//str1不为空和不是只有负号的时候
str4 = true;//算数符号已经点击
//clk=1;
fuhao = value;
fuhao1 = fuhao;
f_span.innerHTML = fuhao1;
}else{
if(reg4.test(str1 + value)){//负号不能输入多次
str1 = value;
//alert(str1);
input4.value = http://www.mamicode.com/str1;//str1允许输入负号一次
input1.value = http://www.mamicode.com/str1;
}
}
}
if(/[%+×÷-]/.test(value) && str2 != ""){//当str2不为空的时候，输入符号就相当于做等号=操作；
if(clk == 0){
//alert(123);
//fuhao1 = value;
str1 = str1 - 0;//转换为数字
str2 = str2 - 0;
switch(fuhao1){//判断输入的符号执行相应的计算
case "+":
input4.value = http://www.mamicode.com/str1+str2;
input3.value = http://www.mamicode.com/str1 + str2;
break;
case "-":
input4.value = http://www.mamicode.com/str1-str2;
input3.value = http://www.mamicode.com/str1-str2;
break;
case "×":
input4.value = http://www.mamicode.com/str1*str2;
input3.value = http://www.mamicode.com/str1*str2;
break;
case "÷":
if(str2 == 0){
input4.valuehttp://www.mamicode.com/= "http://www.mamicode.com/除数不能为0";
break;
}else{
input4.value = http://www.mamicode.com/str1/str2;
input3.value = http://www.mamicode.com/str1/str2;
break;
}
case "%":
input4.value = http://www.mamicode.com/str1%str2;
input3.value = http://www.mamicode.com/str1%str2;
break;
}
//str1 = input4.value;//把结果赋值给str1，方便继续计算
//alert(str1);
//input1.value = http://www.mamicode.com/str1;
str2 = "";//清空str2
input2.valuehttp://www.mamicode.com/= "";
str4 = false;//设置符号点击初始化
clk = 1;
}
if(clk == 1 || clk == 2){
str1 = input4.value;//再次计算的时候，把结果赋值给str1
input1.value = http://www.mamicode.com/str1;
str2 = "";
input2.value = http://www.mamicode.com/str2;
fuhao1 = value;
f_span.innerHTML = fuhao1;
clk = 0;
str4 = true;
}
}
if(value =http://www.mamicode.com/="="){ //点击等号执行
if(str1 != "" && str2 !=""){//str1与str2不为空时才执行，否则不执行
str1 = str1 - 0;//转换为数字
str2 = str2 - 0;
switch(fuhao1){//判断输入的符号执行相应的计算
case "+":
input4.value = http://www.mamicode.com/str1+str2;
input3.value = http://www.mamicode.com/str1 + str2;
break;
case "-":
input4.value = http://www.mamicode.com/str1-str2;
input3.value = http://www.mamicode.com/str1-str2;
break;
case "×":
input4.value = http://www.mamicode.com/str1*str2;
input3.value = http://www.mamicode.com/str1*str2;
break;
case "÷":
if(str2 == 0){
input4.valuehttp://www.mamicode.com/= "http://www.mamicode.com/除数不能为0";
break;
}else{
input4.value = http://www.mamicode.com/str1/str2;
input3.value = http://www.mamicode.com/str1/str2;
break;
}
case "%":
input4.value = http://www.mamicode.com/str1%str2;
input3.value = http://www.mamicode.com/str1%str2;
break;
}
}
//str1 = input4.value;//把结果赋值给str1，方便继续计算
//input1.value = http://www.mamicode.com/str1;
//alert(1);
//str2 = "";//清空str2
str4 = false;//设置符号点击初始化
clk = 2;
//fuhao = "";
}
if(value =http://www.mamicode.com/="重置"){
str1 = "";
str2 = "";
str4 = false;
fuhao = "";
input4.value = http://www.mamicode.com/0;
clk = 0;
input1.valuehttp://www.mamicode.com/= "";
input2.valuehttp://www.mamicode.com/= "";
f_span.innerHTML = "";
input3.valuehttp://www.mamicode.com/= "";
}
if(value =http://www.mamicode.com/="删除"){
if(str1 == ""){
str4 = false;
}
if(fuhao1 =="" && str1!=""){
//alert(12);
str1 += "";
str1 = str1.substring(0,str1.length-1);
input1.value = http://www.mamicode.com/str1;
input4.value = http://www.mamicode.com/str1;
}
if(str2 == "" && fuhao1 != ""){
fuhao1 = "";
f_span.innerHTML = fuhao1;
str4 = false;
//alert(str1);
}
if(input3.value =http://www.mamicode.com/="" && str2 != ""){
//alert(1);
str2 +="";
str2 = str2.substring(0,str2.length-1);
//alert(str2);
input2.value = http://www.mamicode.com/str2;
input4.value = http://www.mamicode.com/str2;
str4 = true;
}
if(input3.value != ""){
input3.value = http://www.mamicode.com/input3.value.substring(0,input3.value.length-1);
input4.value = http://www.mamicode.com/input3.value;
}
}
}
var box = document.getElementById("btn_div");
var inputArr = box.getElementsByTagName("input");
for(i=0;i<inputArr.length;i++){
EventUtil.addHandler(inputArr[i],"click",clickNum);
}
</script>
</p>
</body>
</html> 注：源自百度，仅供参考
用JS写一个计算器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。