您的位置:首页 > Web前端 > JavaScript

js 计算器

2016-02-03 16:33 561 查看
js代码

// JavaScript Document
document.oncontextmenu=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 onclick="operator(\'clear\')" class=" btn-30 btn-radius color-red clear-marginleft">C</div>');
html.push('<div onclick="operator(\'opposite\')" class=" btn-30 btn-radius color-blue">+/-</div>');
html.push('<div onclick="operator(\'percent\')" class=" btn-30 btn-radius color-blue">%</div>');
html.push('<div onclick="operator(\'backspace\')" class=" btn-70 btn-radius color-red font-14">←</div>');
html.push('<div onclick="typetoinput(\'7\')" class=" btn-30 btn-radius clear-marginleft">7</div>');
html.push('<div onclick="typetoinput(\'8\')" class=" btn-30 btn-radius">8</div>');
html.push('<div onclick="typetoinput(\'9\')" class=" btn-30 btn-radius">9</div>');
html.push('<div onclick="operator(\'plus\')" class=" btn-30 btn-radius color-blue font-14">+</div>');
html.push('<div onclick="operator(\'minus\')" class=" btn-30 btn-radius color-blue font-14">-</div>');
html.push('<div onclick="typetoinput(\'4\')" class=" btn-30 btn-radius clear-marginleft">4</div>');
html.push('<div onclick="typetoinput(\'5\')" class=" btn-30 btn-radius">5</div>');
html.push('<div onclick="typetoinput(\'6\')" class=" btn-30 btn-radius">6</div>');
html.push('<div onclick="operator(\'multiply\')" class=" btn-30 btn-radius color-blue font-14">×</div>');
html.push('<div onclick="operator(\'divide\')" class=" btn-30 btn-radius color-blue font-12">÷</div>');
html.push('<div onclick="typetoinput(\'1\')" class=" btn-30 btn-radius clear-marginleft">1</div>');
html.push('<div onclick="typetoinput(\'2\')" class=" btn-30 btn-radius">2</div>');
html.push('<div onclick="typetoinput(\'3\')" class=" btn-30 btn-radius">3</div>');
html.push('<div onclick="operator(\'pow\')" class=" btn-30 btn-radius color-blue font-14">ײ</div>');
html.push('<div onclick="operator(\'sqrt\')" class=" btn-30 btn-radius color-blue font-12">√</div>');
html.push('<div onclick="typetoinput(\'0\')" class=" btn-70 btn-radius clear-marginleft">0</div>');
html.push('<div onclick="typetoinput(\'.\')" class=" btn-30 btn-radius">.</div>');
html.push('<div onclick="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);}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: