基于js的网页计算器实现
2015-06-17 22:25
771 查看
一个功能非常齐全的计算器，支持十六进制、十进制、八进制、二进制的运算，支持公式计算，以及一些常用的功能。总之非常棒！拿出来和大家共享，如果发现bug，请及时修正，谢谢！
将下列代码粘贴保存为html即可在浏览器中运行。你也可以从这里下载：http://download.csdn.net/download/xuexixiaoshizhe/8817277
<HTML>
<HEAD>
<TITLE>计算器</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>
BODY {
FONT-SIZE: 9pt; BACKGROUND-ATTACHMENT: fixed; COLOR: #0001fc; FONT-FAMILY: "宋体", "Arial", "Times New Roman";
}
TD {
FONT-SIZE: 9pt; FONT-FAMILY: "宋体", "Arial Narrow", "Times New Roman"; font-color: #000000
}
</STYLE>
<script type="text/javascript">
<!--
var endNumber=true
var mem=0
var carry=10
var hexnum="0123456789abcdef"
var angle="d"
var stack=""
var level="0"
var layer=0
//数字键
function inputkey(key)
{
var index=key.charCodeAt(0);
if ((carry==2 && (index==48 || index==49))
|| (carry==8 && index>=48 && index<=55)
|| (carry==10 && (index>=48 && index<=57 || index==46))
|| (carry==16 && ((index>=48 && index<=57) || (index>=97 && index<=102))))
if(endNumber)
{
endNumber=false
document.calc.display.value = key
}
else if(document.calc.display.value == null || document.calc.display.value == "0")
document.calc.display.value = key
else
document.calc.display.value += key
}
function changeSign()
{
if (document.calc.display.value!="0")
if(document.calc.display.value.substr(0,1) == "-")
document.calc.display.value = document.calc.display.value.substr(1)
else
document.calc.display.value = "-" + document.calc.display.value
}
//函数键
function inputfunction(fun,shiftfun)
{
endNumber=true
if (document.calc.shiftf.checked)
document.calc.display.value=decto(funcalc(shiftfun,(todec(document.calc.display.value,carry))),carry)
else
document.calc.display.value=decto(funcalc(fun,(todec(document.calc.display.value,carry))),carry)
document.calc.shiftf.checked=false
document.calc.hypf.checked=false
inputshift()
}
function inputtrig(trig,arctrig,hyp,archyp)
{
if (document.calc.hypf.checked)
inputfunction(hyp,archyp)
else
inputfunction(trig,arctrig)
}
//运算符
function operation(join,newlevel)
{
endNumber=true
var temp=stack.substr(stack.lastIndexOf("(")+1)+document.calc.display.value
while (newlevel!=0 && (newlevel<=(level.charAt(level.length-1))))
{
temp=parse(temp)
level=level.slice(0,-1)
}
if (temp.match(/^(.*\d[\+\-\*\/\%\^\&\|x])?([+-]?[0-9a-f\.]+)$/))
document.calc.display.value=RegExp.$2
stack=stack.substr(0,stack.lastIndexOf("(")+1)+temp+join
document.calc.operator.value=" "+join+" "
level=level+newlevel
}
//括号
function addbracket()
{
endNumber=true
document.calc.display.value=0
stack=stack+"("
document.calc.operator.value=" "
level=level+0
layer+=1
document.calc.bracket.value="(="+layer
}
function disbracket()
{
endNumber=true
var temp=stack.substr(stack.lastIndexOf("(")+1)+document.calc.display.value
while ((level.charAt(level.length-1))>0)
{
temp=parse(temp)
level=level.slice(0,-1)
}
document.calc.display.value=temp
stack=stack.substr(0,stack.lastIndexOf("("))
document.calc.operator.value=" "
level=level.slice(0,-1)
layer-=1
if (layer>0)
document.calc.bracket.value="(="+layer
else
document.calc.bracket.value=""
}
//等号
function result()
{
endNumber=true
while (layer>0)
disbracket()
var temp=stack+document.calc.display.value
while ((level.charAt(level.length-1))>0)
{
temp=parse(temp)
level=level.slice(0,-1)
}
document.calc.display.value=temp
document.calc.bracket.value=""
document.calc.operator.value=""
stack=""
level="0"
}
//修改键
function backspace()
{
if (!endNumber)
{
if(document.calc.display.value.length>1)
document.calc.display.value=document.calc.display.value.substring(0,document.calc.display.value.length - 1)
else
document.calc.display.value=0
}
}
function clearall()
{
document.calc.display.value=0
endNumber=true
stack=""
level="0"
layer=""
document.calc.operator.value=""
document.calc.bracket.value=""
}
//转换键
function inputChangCarry(newcarry)
{
endNumber=true
document.calc.display.value=(decto(todec(document.calc.display.value,carry),newcarry))
carry=newcarry
document.calc.sin.disabled=(carry!=10)
document.calc.cos.disabled=(carry!=10)
document.calc.tan.disabled=(carry!=10)
document.calc.bt.disabled=(carry!=10)
document.calc.pi.disabled=(carry!=10)
document.calc.e.disabled=(carry!=10)
document.calc.kp.disabled=(carry!=10)
document.calc.k2.disabled=(carry<=2)
document.calc.k3.disabled=(carry<=2)
document.calc.k4.disabled=(carry<=2)
document.calc.k5.disabled=(carry<=2)
document.calc.k6.disabled=(carry<=2)
document.calc.k7.disabled=(carry<=2)
document.calc.k8.disabled=(carry<=8)
document.calc.k9.disabled=(carry<=8)
document.calc.ka.disabled=(carry<=10)
document.calc.kb.disabled=(carry<=10)
document.calc.kc.disabled=(carry<=10)
document.calc.kd.disabled=(carry<=10)
document.calc.ke.disabled=(carry<=10)
document.calc.kf.disabled=(carry<=10)
}
function inputChangAngle(angletype)
{
endNumber=true
angle=angletype
if (angle=="d")
document.calc.display.value=radiansToDegress(document.calc.display.value)
else
document.calc.display.value=degressToRadians(document.calc.display.value)
endNumber=true
}
function inputshift()
{
if (document.calc.shiftf.checked)
{
document.calc.bt.value="deg "
document.calc.ln.value="exp "
document.calc.log.value="expd"
if (document.calc.hypf.checked)
{
document.calc.sin.value="ahs "
document.calc.cos.value="ahc "
document.calc.tan.value="aht "
}
else
{
document.calc.sin.value="asin"
document.calc.cos.value="acos"
document.calc.tan.value="atan"
}
document.calc.sqr.value="x^.5"
document.calc.cube.value="x^.3"
document.calc.floor.value="小数"
}
else
{
document.calc.bt.value="d.ms"
document.calc.ln.value=" ln "
document.calc.log.value="log "
if (document.calc.hypf.checked)
{
document.calc.sin.value="hsin"
document.calc.cos.value="hcos"
document.calc.tan.value="htan"
}
else
{
document.calc.sin.value="sin "
document.calc.cos.value="cos "
document.calc.tan.value="tan "
}
document.calc.sqr.value="x^2 "
document.calc.cube.value="x^3 "
document.calc.floor.value="取整"
}
}
//存储器部分
function clearmemory()
{
mem=0
document.calc.memory.value=" "
}
function getmemory()
{
endNumber=true
document.calc.display.value=decto(mem,carry)
}
function putmemory()
{
endNumber=true
if (document.calc.display.value!=0)
{
mem=todec(document.calc.display.value,carry)
document.calc.memory.value=" M "
}
else
document.calc.memory.value=" "
}
function addmemory()
{
endNumber=true
mem=parseFloat(mem)+parseFloat(todec(document.calc.display.value,carry))
if (mem==0)
document.calc.memory.value=" "
else
document.calc.memory.value=" M "
}
function multimemory()
{
endNumber=true
mem=parseFloat(mem)*parseFloat(todec(document.calc.display.value,carry))
if (mem==0)
document.calc.memory.value=" "
else
document.calc.memory.value=" M "
}
//十进制转换
function todec(num,oldcarry)
{
if (oldcarry==10 || num==0) return(num)
var neg=(num.charAt(0)=="-")
if (neg) num=num.substr(1)
var newnum=0
for (var index=1;index<=num.length;index++)
newnum=newnum*oldcarry+hexnum.indexOf(num.charAt(index-1))
if (neg)
newnum=-newnum
return(newnum)
}
function decto(num,newcarry)
{
var neg=(num<0)
if (newcarry==10 || num==0) return(num)
num=""+Math.abs(num)
var newnum=""
while (num!=0)
{
newnum=hexnum.charAt(num%newcarry)+newnum
num=Math.floor(num/newcarry)
}
if (neg)
newnum="-"+newnum
return(newnum)
}
//表达式解析
function parse(string)
{
if (string.match(/^(.*\d[\+\-\*\/\%\^\&\|x\<])?([+-]?[0-9a-f\.]+)([\+\-\*\/\%\^\&\|x\<])([+-]?[0-9a-f\.]+)$/))
return(RegExp.$1+cypher(RegExp.$2,RegExp.$3,RegExp.$4))
else
return(string)
}
//数学运算和位运算
function cypher(left,join,right)
{
left=todec(left,carry)
right=todec(right,carry)
if (join=="+")
return(decto(parseFloat(left)+parseFloat(right),carry))
if (join=="-")
return(decto(left-right,carry))
if (join=="*")
return(decto(left*right,carry))
if (join=="/" && right!=0)
return(decto(left/right,carry))
if (join=="%")
return(decto(left%right,carry))
if (join=="&")
return(decto(left&right,carry))
if (join=="|")
return(decto(left|right,carry))
if (join=="^")
return(decto(Math.pow(left,right),carry))
if (join=="x")
return(decto(left^right,carry))
if (join=="<")
return(decto(left<<right,carry))
alert("除数不能为零")
return(left)
}
//函数计算
function funcalc(fun,num)
{
with(Math)
{
if (fun=="pi")
return(PI)
if (fun=="e")
return(E)
if (fun=="abs")
return(abs(num))
if (fun=="ceil")
return(ceil(num))
if (fun=="round")
return(round(num))
if (fun=="floor")
return(floor(num))
if (fun=="deci")
return(num-floor(num))
if (fun=="ln" && num>0)
return(log(num))
if (fun=="exp")
return(exp(num))
if (fun=="log" && num>0)
return(log(num)*LOG10E)
if (fun=="expdec")
return(pow(10,num))
if (fun=="cube")
return(num*num*num)
if (fun=="cubt")
return(pow(num,1/3))
if (fun=="sqr")
return(num*num)
if (fun=="sqrt" && num>=0)
return(sqrt(num))
if (fun=="!")
return(factorial(num))
if (fun=="recip" && num!=0)
return(1/num)
if (fun=="dms")
return(dms(num))
if (fun=="deg")
return(deg(num))
if (fun=="~")
return(~num)
if (angle=="d")
{
if (fun=="sin")
return(sin(degressToRadians(num)))
if (fun=="cos")
return(cos(degressToRadians(num)))
if (fun=="tan")
return(tan(degressToRadians(num)))
if (fun=="arcsin" && abs(num)<=1)
return(radiansToDegress(asin(num)))
if (fun=="arccos" && abs(num)<=1)
return(radiansToDegress(acos(num)))
if (fun=="arctan")
return(radiansToDegress(atan(num)))
}
else
{
if (fun=="sin")
return(sin(num))
if (fun=="cos")
return(cos(num))
if (fun=="tan")
return(tan(num))
if (fun=="arcsin" && abs(num)<=1)
return(asin(num))
if (fun=="arccos" && abs(num)<=1)
return(acos(num))
if (fun=="arctan")
return(atan(num))
}
if (fun=="hypsin")
return((exp(num)-exp(0-num))*0.5)
if (fun=="hypcos")
return((exp(num)+exp(-num))*0.5)
if (fun=="hyptan")
return((exp(num)-exp(-num))/(exp(num)+exp(-num)))
if (fun=="ahypsin" | fun=="hypcos" | fun=="hyptan")
{
alert("对不起,公式还没有查到!")
return(num)
}
alert("超出函数定义范围")
return(num)
}
}
function factorial(n)
{
n=Math.abs(parseInt(n))
var fac=1
for (;n>0;n-=1)
fac*=n
return(fac)
}
function dms(n)
{
var neg=(n<0)
with(Math)
{
n=abs(n)
var d=floor(n)
var m=floor(60*(n-d))
var s=(n-d)*60-m
}
var dms=d+m/100+s*0.006
if (neg)
dms=-dms
return(dms)
}
function deg(n)
{
var neg=(n<0)
with(Math)
{
n=abs(n)
var d=floor(n)
var m=floor((n-d)*100)
var s=(n-d)*100-m
}
var deg=d+m/60+s/36
if (neg)
deg=-deg
return(deg)
}
function degressToRadians(degress)
{
return(degress*Math.PI/180)
}
function radiansToDegress(radians)
{
return(radians*180/Math.PI)
}
//-->
</script>
</HEAD>
<BODY leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" bgcolor="B9D5FD">
<table width="520" border="0" cellspacing="0" cellpadding="0" height="280" align="center">
<tr align="center" bgcolor="B9D5FD">
<td height="7" colspan="2" bgcolor="B9D5FD"></td>
</tr>
<tr align="center" bgcolor="B9D5FD">
<td width="520" height="250" colspan="2" bgcolor="B9D5FD">
<FORM name=calc>
<table height=225 width=500 border=0>
<tbody>
<tr>
<td height=30><table width=500>
<tbody>
<tr>
<td></td>
<td><div align="center">
<input readOnly size=40 value=0 name=display>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="195"><table width=500>
<tbody>
<tr>
<td width=290><input onClick=inputChangCarry(16) type=radio
name=carry>
十六进制
<input onClick=inputChangCarry(10) type=radio
CHECKED name=carry>
十进制
<input onClick=inputChangCarry(8) type=radio
name=carry>
八进制
<input onClick=inputChangCarry(2) type=radio
name=carry>
二进制 </td>
<td></td>
<td width=135><input onClick="inputChangAngle('d')" type=radio
CHECKED value=d name=angle>
角度制
<input
onClick="inputChangAngle('r')" type=radio value=r name=angle>
弧度制 </td>
</tr>
</tbody>
</table>
<table width=500>
<tbody>
<tr>
<td width=170><input onClick=inputshift() type=checkbox value=ON
name=shiftf>
上档功能
<input onClick=inputshift() type=checkbox value=ON
name=hypf>
双曲函数 </td>
<td><input style="BACKGROUND-COLOR: lightgrey" readOnly size=3
name=bracket>
<input style="BACKGROUND-COLOR: lightgrey" readOnly
size=3 name=memory>
<input style="BACKGROUND-COLOR: lightgrey"
readOnly size=3 name=operator>
</td>
<td width=183><input style="COLOR: red" onClick=backspace() type=button value=" 退格 " name="button">
<input style="COLOR: red" onClick="document.calc.display.value = 0 " type=button value=" 清屏 " name="button">
<input style="COLOR: red" onClick=clearall() type=button value=" 全清" name="button">
</td>
</tr>
</tbody>
</table>
<table width=500>
<tbody>
<tr>
<td><table>
<tbody>
<tr align=middle>
<td><input style="COLOR: blue" onClick="inputfunction('pi','pi')" type=button value=" PI " name=pi>
</td>
<td><input style="COLOR: blue" onClick="inputfunction('e','e')" type=button value=" E " name=e>
</td>
<td><input style="COLOR: #ff00ff" onClick="inputfunction('dms','deg')" type=button value=d.ms name=bt>
</td>
</tr>
<tr align=middle>
<td><input style="COLOR: #ff00ff" onClick=addbracket() type=button value=" ( " name="button">
</td>
<td><input style="COLOR: #ff00ff" onClick=disbracket() type=button value=" ) " name="button">
</td>
<td><input style="COLOR: #ff00ff" onClick="inputfunction('ln','exp')" type=button value=" ln " name=ln>
</td>
</tr>
<tr align=middle>
<td><input style="COLOR: #ff00ff" onClick="inputtrig('sin','arcsin','hypsin','ahypsin')" type=button value="sin " name=sin>
</td>
<td><input style="COLOR: #ff00ff" onClick="operation('^',7)" type=button value="x^y " name="button">
</td>
<td><input style="COLOR: #ff00ff" onClick="inputfunction('log','expdec')" type=button value="log " name=log>
</td>
</tr>
<tr align=middle>
<td><input style="COLOR: #ff00ff" onClick="inputtrig('cos','arccos','hypcos','ahypcos')" type=button value="cos " name=cos>
</td>
<td><input style="COLOR: #ff00ff" onClick="inputfunction('cube','cubt')" type=button value="x^3 " name=cube>
</td>
<td><input style="COLOR: #ff00ff" onClick="inputfunction('!','!')" type=button value=" n! " name="button">
</td>
</tr>
<tr align=middle>
<td><input style="COLOR: #ff00ff" onClick="inputtrig('tan','arctan','hyptan','ahyptan')" type=button value="tan " name=tan>
</td>
<td><input style="COLOR: #ff00ff" onClick="inputfunction('sqr','sqrt')" type=button value="x^2 " name=sqr>
</td>
<td><input style="COLOR: #ff00ff" onClick="inputfunction('recip','recip')" type=button value="1/x " name="button">
</td>
</tr>
</tbody>
</table></td>
<td width=30></td>
<td><table>
<tbody>
<tr>
<td><input style="COLOR: red" onClick=putmemory() type=button value=" 储存 " name="button">
</td>
</tr>
<tr>
<td><input style="COLOR: red" onClick=getmemory() type=button value=" 取存 " name="button">
</td>
</tr>
<tr>
<td><input style="COLOR: red" onClick=addmemory() type=button value=" 累存 " name="button">
</td>
</tr>
<tr>
<td><input style="COLOR: red" onClick=multimemory() type=button value=" 积存 " name="button">
</td>
</tr>
<tr>
<td height=33><input style="COLOR: red" onClick=clearmemory() type=button value=" 清存 " name="button">
</td>
</tr>
</tbody>
</table></td>
<td width=30></td>
<td><table>
<tbody>
<tr align=middle>
<td><input style="COLOR: blue" onClick="inputkey('7')" type=button value=" 7 " name=k7>
</td>
<td><input style="COLOR: blue" onClick="inputkey('8')" type=button value=" 8 " name=k8>
</td>
<td><input style="COLOR: blue" onClick="inputkey('9')" type=button value=" 9 " name=k9>
</td>
<td><input style="COLOR: red" onClick="operation('/',6)" type=button value=" / " name="button">
</td>
<td><input style="COLOR: red" onClick="operation('%',6)" type=button value=取余 name="button">
</td>
<td><input style="COLOR: red" onClick="operation('&',3)" type=button value=" 与 " name="button">
</td>
</tr>
<tr align=middle>
<td><input style="COLOR: blue" onClick="inputkey('4')" type=button value=" 4 " name=k4>
</td>
<td><input style="COLOR: blue" onClick="inputkey('5')" type=button value=" 5 " name=k5>
</td>
<td><input style="COLOR: blue" onClick="inputkey('6')" type=button value=" 6 " name=k6>
</td>
<td><input style="COLOR: red" onClick="operation('*',6)" type=button value=" * " name="button">
</td>
<td><input style="COLOR: red" onClick="inputfunction('floor','deci')" type=button value=取整 name=floor>
</td>
<td><input style="COLOR: red" onClick="operation('|',1)" type=button value=" 或 " name="button">
</td>
</tr>
<tr align=middle>
<td><input style="COLOR: blue" onClick="inputkey('1')" type=button value=" 1 " name="button">
</td>
<td><input style="COLOR: blue" onClick="inputkey('2')" type=button value=" 2 " name=k2>
</td>
<td><input style="COLOR: blue" onClick="inputkey('3')" type=button value=" 3 " name=k3>
</td>
<td><input style="COLOR: red" onClick="operation('-',5)" type=button value=" - " name="button">
</td>
<td><input style="COLOR: red" onClick="operation('<',4)" type=button value=左移 name="button">
</td>
<td><input style="COLOR: red" onClick="inputfunction('~','~')" type=button value=" 非 " name="button">
</td>
</tr>
<tr align=middle>
<td><input style="COLOR: blue" onClick="inputkey('0')" type=button value=" 0 " name="button">
</td>
<td><input style="COLOR: blue" onClick=changeSign() type=button value=+/- name="button">
</td>
<td><input style="COLOR: blue" onClick="inputkey('.')" type=button value=" . " name=kp>
</td>
<td><input style="COLOR: red" onClick="operation('+',5)" type=button value=" + " name="button">
</td>
<td><input style="COLOR: red" onClick=result() type=button value=" ＝ " name="button">
</td>
<td><input style="COLOR: red" onClick="operation('x',2)" type=button value=异或 name="button">
</td>
</tr>
<tr align=middle>
<td><input style="COLOR: blue" disabled onClick="inputkey('a')" type=button value=" A " name=ka>
</td>
<td><input style="COLOR: blue" disabled onClick="inputkey('b')" type=button value=" B " name=kb>
</td>
<td><input style="COLOR: blue" disabled onClick="inputkey('c')" type=button value=" C " name=kc>
</td>
<td><input style="COLOR: blue" disabled onClick="inputkey('d')" type=button value=" D " name=kd>
</td>
<td><input style="COLOR: blue" disabled onClick="inputkey('e')" type=button value=" E " name=ke>
</td>
<td><input style="COLOR: blue" disabled onClick="inputkey('f')" type=button value=" F " name=kf>
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</form>
<FORM name=form1 onSubmit="return FrontPage_Form1_Validator(this)">
</FORM>
</td>
</tr>
</table>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- 仿51JOB的地区选择效果(可选择多个地区)
- js身份证验证超强脚本
- C#与js实现去除textbox文本框里面重复记录的方法
- 28个JS验证函数收集
- js继承 Base类的源码解析