js 计算器

最新推荐文章于 2024-11-05 14:49:17 发布

w329636271

最新推荐文章于 2024-11-05 14:49:17 发布

阅读量538

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript 计算器开源

本文链接：https://blog.csdn.net/w329636271/article/details/50630169

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js代码

// JavaScript Document
document.οncοntextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
var _string=new Array();
var _type;
function typetoinput(num)
{
	input=document.getElementById("input-box");
	if(input.name=="type")
	{
		input.value=" ";
		input.name=" ";
	}
	if(num!="."&&input.value[0]==0&&input.value[1]!=".") 
	{
		input.value=num; //Reset input num
	}
	else if(num=="."&&input.value.indexOf(".")>-1)
	{
		input.value=input.value; //Only one point allow input
	}
	else if(input.value=="Infinity"||input.value=="NaN")
	{
		input.value="";
		input.value+=num; //Splicing string
	}
	else
	{
		if(input.value == "0" && num !="."){
			input.value = num; 
		}
		else {
			input.value+=num; 
		}
	}
}

function operator(type)
{
	switch (type)
	{
		case "clear":
				input.value="0";
				input.name = " ";
				_string.length=0;
				_type = undefined;
				break;
		case "backspace":
				var val = input.value;
				if(val && val.length > 0)
				{
					input.value=input.value.replace(/.$/,'');
					if(input.value=="")
					{
						input.value="0";
						input.name = " ";
					}
				}
				break;
		case "opposite":
				if(checknum(input.value,input.name)!=0)
				{
					input.value=-input.value;
					input.name="type";

				}
				break;
		case "percent":
				if(checknum(input.value,input.name)!=0)
				{
					input.value=input.value/100;
					input.name="type";

				}
				break;
		case "pow":
				if(checknum(input.value,input.name)!=0)
				{
					input.value=FloatMul(input.value,input.value);
					input.name="type";

				}
				break;
		case "sqrt":
				if(checknum(input.value,input.name)!=0)
				{
					input.value=Math.sqrt(input.value);
					input.name="type";
				}
				break;
		case "plus":
				if(checknum(input.value,input.name)!=0)
				{
					_string.push(input.value);
					_type="plus"
					input.value="+";
					input.name="type";
				}
				else
				if(input.name == 'type')
				{
					_type="plus"
					input.value="+";
					input.name="type";
				}	
				break;
		case "minus":
				if(checknum(input.value,input.name)!=0)
				{
					_string.push(input.value);
					_type="minus"
					input.value="-";
					input.name="type";
				}
				else
				if(input.name == 'type')
				{
					_type="minus"
					input.value="-";
					input.name="type";
				}
				break;
		case "multiply":
				if(checknum(input.value,input.name)!=0)
				{
					_string.push(input.value);
					_type="multiply"
					input.value="×";
					input.name="type";
				}
				else
				if(input.name == 'type')
				{
					_type="multiply"
					input.value="×";
					input.name="type";
				}
				break;
		case "divide":
				if(checknum(input.value,input.name)!=0)
				{
					_string.push(input.value);
					_type="divide"
					input.value="÷";
					input.name="type";
				}
				else
				if(input.name == 'type')
				{
					_type="divide"
					input.value="÷";
					input.name="type";
				}
				break;
		case "result":
				if(checknum(input.value,input.name)!=0)
				{
					_string.push(input.value);
					
					if(_string.length >= 2){
						if(parseInt(_string.length)%2!=0 )
						{
							_string.push(_string[_string.length-2])
						}
						if(_type=="plus")
							{
								var a = result(_string)[0],b = result(_string)[1];
								input.value = FloatAdd(a,b);													
								input.name="type"
							}
							else if(_type=="minus")
							{
								var a = result(_string)[0],b = result(_string)[1];
								input.value = FloatSub(a,b);
								input.name="type"
							}
							else if(_type=="multiply")
							{
								var a = result(_string)[0],b = result(_string)[1];
								input.value = FloatMul(a,b);
								input.name="type"
							}
							else if(_type=="divide")
							{
								var a = result(_string)[0],b = result(_string)[1];
								input.value = FloatDiv(a,b);
								input.name="type"
							}
						break;
					}
				}				
	}
}
function FloatAdd(arg1,arg2){   
	var r1,r2,m;   
	r1 =   floatLen(arg1);
	r2 =  floatLen(arg2);
	m=Math.pow(10,Math.max(r1,r2))   
	return (arg1*m+arg2*m)/m   
}
function FloatSub(arg1,arg2){   
	var r1,r2,m,n;   
	r1 =   floatLen(arg1);
	r2 =  floatLen(arg2);
	m=Math.pow(10,Math.max(r1,r2));   
	//动态控制精度长度   
	n=(r1>=r2)?r1:r2;   
	return ((arg1*m-arg2*m)/m).toFixed(n);   
}
 //浮点数乘法运算   
function FloatMul(arg1,arg2)    
{    
	var m=0,s1=arg1.toString(),s2=arg2.toString();    
	m +=   floatLen(arg1);
	m +=  floatLen(arg2);  
	return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)    
}    
//浮点数除法运算   
function FloatDiv(arg1,arg2){    
	var t1=0,t2=0,r1,r2;    
	t1 =   floatLen(arg1);
	t2 =  floatLen(arg2);   
	with(Math){    
		r1=Number(arg1.toString().replace(".",""))    
		r2=Number(arg2.toString().replace(".",""))    
		return (r1/r2)*pow(10,t2-t1);    
	}    
}
function floatLen(arg1){
	var len = 0;
	try{
		var arg = arg1.toString().split(".")[1];
		var len = arg.split(/e/gi)[0].length
		}catch(e){len=0}   
	return len;	
}
function result(value)
{
	var result=new Array();
	if(value.length%2==0)
	{
		result.push((value[value.length-2]));
		result.push((value[value.length-1]));
		return (result);
	}
	else
	{
		result.push((value[value.length-1]))
		result.push((value[value.length-2]))
		
		return (result);
	}
}

function checknum(inputvalue , name)
{
	if(( name=='type' && (inputvalue=="+"||inputvalue=="-"||inputvalue=="×"||inputvalue=="÷"))||input.value=="0")
	{
		return 0;
	}
}


window.document.onkeydown = disableRefresh;
function disableRefresh(evt){
evt = (evt) ? evt : window.event
if (evt.keyCode) 
{
   if(evt.keyCode == 13){operator('result')}
   else if(evt.keyCode == 8){input.focus();window.event.returnValue = false;operator('backspace')}
   else if(evt.keyCode == 27){operator('clear')}
   else if(evt.keyCode == 48){typetoinput('0')}
   else if(evt.keyCode == 49){typetoinput('1')}
   else if(evt.keyCode == 50){typetoinput('2')}
   else if(evt.keyCode == 51){typetoinput('3')}
   else if(evt.keyCode == 52){typetoinput('4')}
   else if(evt.keyCode == 53){typetoinput('5')}
   else if(evt.keyCode == 54){typetoinput('6')}
   else if(evt.keyCode == 55){typetoinput('7')}
   else if(evt.keyCode == 56){typetoinput('8')}
   else if(evt.keyCode == 57){typetoinput('9')}
   else if(evt.keyCode == 96){typetoinput('0')}
   else if(evt.keyCode == 97){typetoinput('1')}
   else if(evt.keyCode == 98){typetoinput('2')}
   else if(evt.keyCode == 99){typetoinput('3')}
   else if(evt.keyCode == 100){typetoinput('4')}
   else if(evt.keyCode == 101){typetoinput('5')}
   else if(evt.keyCode == 102){typetoinput('6')}
   else if(evt.keyCode == 103){typetoinput('7')}
   else if(evt.keyCode == 104){typetoinput('8')}
   else if(evt.keyCode == 105){typetoinput('9')}
   else if(evt.keyCode == 110){typetoinput('.')}
   else if(evt.keyCode == 106){operator('multiply')}
   else if(evt.keyCode == 107){operator('plus')}
   else if(evt.keyCode == 111){operator('divide')}
   else if(evt.keyCode == 109){operator('minus')}
}
}

function getCalac() {
	var html = [];
	html.push('<div id="calcuator">');
	html.push('<input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" />');
	html.push('<div id="btn-list">');
		html.push('<div οnclick="operator(\'clear\')" class=" btn-30 btn-radius color-red clear-marginleft">C</div>');
		html.push('<div οnclick="operator(\'opposite\')" class=" btn-30 btn-radius color-blue">+/-</div>');
		html.push('<div οnclick="operator(\'percent\')" class=" btn-30 btn-radius color-blue">%</div>');
		html.push('<div οnclick="operator(\'backspace\')" class=" btn-70 btn-radius color-red font-14">←</div>');
		html.push('<div οnclick="typetoinput(\'7\')" class=" btn-30 btn-radius clear-marginleft">7</div>');
		html.push('<div οnclick="typetoinput(\'8\')" class=" btn-30 btn-radius">8</div>');
		html.push('<div οnclick="typetoinput(\'9\')" class=" btn-30 btn-radius">9</div>');
		html.push('<div οnclick="operator(\'plus\')" class=" btn-30 btn-radius color-blue font-14">+</div>');
		html.push('<div οnclick="operator(\'minus\')" class=" btn-30 btn-radius color-blue font-14">-</div>');
		html.push('<div οnclick="typetoinput(\'4\')" class=" btn-30 btn-radius clear-marginleft">4</div>');
		html.push('<div οnclick="typetoinput(\'5\')" class=" btn-30 btn-radius">5</div>');
		html.push('<div οnclick="typetoinput(\'6\')" class=" btn-30 btn-radius">6</div>');
		html.push('<div οnclick="operator(\'multiply\')" class=" btn-30 btn-radius color-blue font-14">×</div>');
		html.push('<div οnclick="operator(\'divide\')" class=" btn-30 btn-radius color-blue font-12">÷</div>');
		html.push('<div οnclick="typetoinput(\'1\')" class=" btn-30 btn-radius clear-marginleft">1</div>');
		html.push('<div οnclick="typetoinput(\'2\')" class=" btn-30 btn-radius">2</div>');
		html.push('<div οnclick="typetoinput(\'3\')" class=" btn-30 btn-radius">3</div>');
		html.push('<div οnclick="operator(\'pow\')" class=" btn-30 btn-radius color-blue font-14">×²</div>');
		html.push('<div οnclick="operator(\'sqrt\')" class=" btn-30 btn-radius color-blue font-12">√</div>');
		html.push('<div οnclick="typetoinput(\'0\')" class=" btn-70 btn-radius clear-marginleft">0</div>');
		html.push('<div οnclick="typetoinput(\'.\')" class=" btn-30 btn-radius">.</div>');
		html.push('<div οnclick="operator(\'result\')" class=" btn-70 btn-radius color-red font-14">=</div>');
	html.push('</div>');
 html.push('</div>');
	return html.join("");	
}

样式

@charset "utf-8";
/*body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
*/h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
/*body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "微软雅黑"; }
ul, ol, li {list-style-type:none;vertical-align:0}*/
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{height:0; overflow:hidden; clear:both}

#calcuator{ width:200px; height:245px; padding:10px;/* border:1px solid #e5e5e5;*/ background:#f8f8f8; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; box-shadow:0px 0px 10px #f2f2f2; -moz-box-shadow:0px 0px 10px #f2f2f2; -webkit-box-shadow:0px 0px 10px #f2f2f2; margin: 0px auto; }
#calcuator #input-box{ margin:0; width:187px; padding:9px 5px; height:14px;border:1px solid #e5e5e5; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background:#FFF; text-align:right; line-height:14px; font-size:12px; font-family:Verdana, Geneva, sans-serif; color:#666; outline:none;  text-transform:uppercase;}
#calcuator #btn-list{ width:200px; overflow:hidden;}
#calcuator #btn-list .btn-radius{ border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; border:1px solid #e5e5e5; background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb)); background:-moz-linear-gradient(top, #f7f7f7,#ebebeb);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1); line-height:29px; text-align:center; text-shadow:0px 1px 1px #FFF; font-weight:bold; font-family:Verdana, Geneva, sans-serif; color:#666; float:left; margin-left:11px; margin-top:11px; font-size:12px; cursor:pointer;}
#calcuator #btn-list .btn-radius:active{ background:#ffffff;}
#calcuator #btn-list .clear-marginleft{ margin-left:0;}
#calcuator #btn-list .font-14{ font-size:14px;}
#calcuator #btn-list .color-red{ color:#ff5050}
#calcuator #btn-list .color-blue{ color:#00b4ff}
#calcuator #btn-list .btn-30{ width:29px; height:29px;background-image:url(img/btn.png);}
#calcuator #btn-list .btn-70{ width:70px; height:29px;background-image:url(img/btn.png);}