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);}
相关文章推荐
- Ember.js学习教程 -- 目录
- js等比例缩放图片
- JavaScript高级程序设计(笔记一)
- 利用fiddler模拟发送json数据的post请求
- Javascript中如何获取统一管理的Java提示语
- 创建jsp模板
- Newtonsoft.Json高级用法
- 【项目经验】——JSON.parse() && JSON.stringify()
- 【项目经验】——JSON.parse() && JSON.stringify()
- 原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
- js中的json对象和字符串之间的转化
- web前端基础——初识JavaScript
- AJAX 跨域请求 - JSONP获取JSON数据
- jsp多条件查询及查询结果在同一页面显示(原创)
- JS对时间的常用处理
- [译]关于JavaScript 作用域你想知道的一切
- store.js 跨浏览器的localStorage
- Andorid之Gson解析Json数据
- JSON 数据格式详解
- JavaScript是如何做到单线程异步的