<!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=utf-8" /> |
<title>JavaScript计算器</title> |
<style type= "text/css" > |
input { |
background-color: #CCC; |
width: 70px; |
height: 40px; |
} |
table { |
background-color: #999; |
border: 3px solid #666; |
padding: 3px; |
} |
.result { |
width: 420px; |
background-color: #999; |
margin-bottom: 10px; |
font-family: "微软雅黑" , Verdana, sans-serif, "宋体" ; |
font-size: 14px; |
color: #FFF; |
padding-left: 20px; |
} |
.clear { |
width: 146px; |
} |
</style> |
</head> |
<script language= "JavaScript" > |
var baseoper; |
var digitstate; |
var num1; |
var operstate; |
function setStartState() { |
digitstate = "beempty" ; |
num1 = 0; |
baseoper = "beempty" ; |
operstate = false ; |
} |
function add(i) { |
if (operstate) { |
cal.total.value = i; |
operstate = false ; |
} else { |
if (cal.total.value == "0" ) { |
cal.total.value = i; |
digistate = "bein" ; |
} else |
cal.total.value += i; |
} |
} |
function cleartext() { |
cal.total.value = "0" ; |
digitstate = "beempty" ; |
basestate = "beempty" |
} |
function count() { |
if (baseoper != "beempty" ) { |
switch (baseoper) { |
case "+" : |
num1 = parseFloat(num1) + parseFloat(cal.total.value); |
break ; |
case "-" : |
num1 = parseFloat(num1) - parseFloat(cal.total.value); |
break ; |
case "*" : |
num1 = parseFloat(num1) * parseFloat(cal.total.value); |
break ; |
case "/" : |
num1 = parseFloat(num1) / parseFloat(cal.total.value); |
break ; |
} |
preoper = true ; |
cal.total.value = num1; |
} |
baseoper = "beempty" ; |
} |
function useFunc(func) { |
switch (func) { |
case "sin" : |
cal.total.value = Math.sin(cal.total.value); |
break ; |
case "cos" : |
cal.total.value = Math.cos(cal.total.value); |
break ; |
case "asin" : |
cal.total.value = Math.asin(cal.total.value); |
break ; |
case "acos" : |
cal.total.value = Math.acos(cal.total.value); |
break ; |
case "tan" : |
cal.total.value = Math.tan(cal.total.value); |
break ; |
case "atan" : |
cal.total.value = Math.atan(cal.total.value); |
break ; |
case "log" : |
cal.total.value = Math.log(cal.total.value); |
break ; |
case "exp" : |
cal.total.value = Math.exp(cal.total.value); |
break ; |
case "sqrt" : |
cal.total.value = Math.sqrt(cal.total.value); |
break ; |
case "1/x" : |
cal.total.value = 1 / cal.total.value; |
break ; |
} |
operstate = true ; |
} |
function addPoint() { |
if (digitstate == "bein" || digitstate == "beempty" ) { |
cal.total.value += "." ; |
digistate = "befloat" ; |
} |
} |
function setOper(oper) { |
operstate = true ; |
if (baseoper == "beempty" ) { |
num1 = 0 + cal.total.value; |
baseoper = oper; |
} else { |
count(); |
baseoper = oper; |
} |
} |
</script> |
<body onload= "setStartState()" > |
<h2>JavaScript计算器</h2> |
<form name= "cal" > |
<table cellpadding= "0" cellspacing= "0" > |
<tr align= "center" > |
<td colspan= "6" ><input class= "result" type= "Text" name= "total" |
size= "25" value= "0" ></td> |
</tr> |
<tr align= "center" > |
<td><input type= "Button" value= "sin" onclick= "useFunc('sin')" ></td> |
<td><input type= "Button" value= "cos" onclick= "useFunc('cos')" ></td> |
<td><input type= "Button" value= "1" onclick= "add('1')" ></td> |
<td><input type= "Button" value= "2" onclick= "add('2')" ></td> |
<td><input type= "Button" value= "3" onclick= "add('3')" ></td> |
<td><input type= "Button" value= "+" onclick= "setOper('+')" ></td> |
</tr> |
<tr align= "center" > |
<td><input type= "Button" value= "asin" onclick= "useFunc('asin')" ></td> |
<td><input type= "Button" value= "acos" onclick= "useFunc('acos')" ></td> |
<td><input type= "Button" value= "4" onclick= "add('4')" ></td> |
<td><input type= "Button" value= "5" onclick= "add('5')" ></td> |
<td><input type= "Button" value= "6" onclick= "add('6')" ></td> |
<td><input type= "Button" value= "-" onclick= "setOper('-')" ></td> |
</tr> |
<tr align= "center" > |
<td><input type= "Button" value= "tan" onclick= "useFunc('tan')" ></td> |
<td><input type= "Button" value= "atan" onclick= "useFunc('atan')" ></td> |
<td><input type= "Button" value= "7" onclick= "add('7')" ></td> |
<td><input type= "Button" value= "8" onclick= "add('8')" ></td> |
<td><input type= "Button" value= "9" onclick= "add('9')" ></td> |
<td><input type= "Button" value= "x" onclick= "setOper('*')" ></td> |
</tr> |
<tr align= "center" > |
<td><input type= "Button" value= "log" onclick= "useFunc('log')" ></td> |
<td><input type= "Button" value= "exp" onclick= "useFunc('exp')" ></td> |
<td><input type= "Button" value= "0" onclick= "add('0')" ></td> |
<td><input type= "Button" value= "." onclick= "addPoint()" ></td> |
<td><input type= "Button" value= "c" onclick= "cleartext()" ></td> |
<td><input type= "Button" value= "÷" onclick= "setOper('/')" ></td> |
</tr> |
<tr align= "center" > |
<td><input type= "Button" value= "sqrt" onclick= "useFunc('sqrt')" > |
<td><input type= "Button" value= "1/x" onclick= "useFunc('1/x')" > |
<td><input type= "Button" value= "pi" |
onclick= "cal.total.value=Math.PI" ></td> |
<td><input type= "Button" value= "E" |
onclick= "cal.total.value=Math.E" ></td> |
<td colspan=2><input class= "clear" type= "Button" value= "=" |
onclick= "count()" ></td> |
</tr> |
</table> |
</form> |
</body> |
</html> |
高级设计师
by: 神马 发表于:2012-09-11 10:52:05 顶(1) | 踩(0) 回复
漂亮!
回复评论