计算器HTML源码，纯代码实现
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>科学计算器_www.aode8.com</title>
<style>
body { margin: 0; padding: 0; font-size: 12px; font-family: "5FAE8F6F96C59ED1" }
h1 { text-align: center;}
.container { width: 680px; margin: 0 auto; background: #fff }
input { width: 60px; height: 35px; cursor: pointer; font-family: "5FAE8F6F96C59ED1" }
input[type="button"] { border-radius: 1px; }
input:focus { outline: none }
input[disabled] { color: #AEAEAE; cursor: default; }
input[type="button"]:hover { border: #aaa solid 1px; }
input[disabled]:hover { border: #ccc solid 1px }
.cw { width: 680px; border: #CCC solid 1px; }
.cw-input { width: 630px; padding: 10px; height: 20px; font-weight: 800; text-align: right; font-size: 16px; cursor: default; margin-top: 10px; }
.cw-show { height: 30px; border: #DBD9D9 solid 1px; cursor: default }
.cw-num { background: #f0f0f0; border: #ccc solid 1px; font-weight: 800; color: #666; }
.cw-select { width: inherit; height: inherit; }
.cw-fn, .cw-tpl, .cw-x { color: #444; background: #D6D6D6; border: #c6c6c6 solid 1px; ; background-image: -webkit-linear-gradient(top, #D6D6D6, #D0D0D0); background-image: -moz-linear-gradient(top, #d6d6d6, #d0d0d0); background-image: -ms-linear-gradient(top, #d6d6d6, #d0d0d0); background-image: linear-gradient(top, #d6d6d6, #d0d0d0); }
.cw-x { color: #AF5757; font-weight: 800; }
.cw-enter { -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); background-image: -moz-linear-gradient(top, #4d90fe, #357ae8); background-image: -ms-linear-gradient(top, #4d90fe, #357ae8); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4d90fe, EndColorStr=#357ae8);
background-image: -o-linear-gradient(top, #4d90fe, #357ae8); background-image: -webkit-gradient(linear, left top, left bottom, from(#4D90FE), to(#357AE8)); background-image: -webkit-linear-gradient(top, #4D90FE, #357AE8); background-color: #4D90FE; background-image: linear-gradient(top, #4d90fe, #357ae8); border: 1px solid #2F5BB7; color: #FEFEFE; font-weight: bold; font-size: 20px; }
input[type="button"].cw-enter:hover { border: #264FA4 solid 1px; }
.center-link {
display: block;
text-align: center;
width: fit-content;
margin: 0 auto;
}
</style>
<script language="javascript">
<!--
var endNumber = true
var mem = 0
var carry = 10
var hexnum = "0123456789abcdef"
var angle = "d"
var stack = ""
var level = ""
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 === "")
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 = ""
}
//修改键
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 = ""
endNumber = true
stack = ""
level = ""
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 == "-") {
var r1, r2, m;
try {
r1 = left.toString().split('.')[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = right.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
n = (r1 >= r2) ? r1 : r2;
return (decto((Math.round(left * m - right * m) / m).toFixed(n), 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>
<h1>简单的科学计算器</h1>
<form name="calc" class="container">
<table class="cw" id="kxjsq">
<tbody>
<tr>
<td align="center"><input class="cw-input" readonly size="40" value="" name="display"></td>
</tr>
<tr>
<td>
<table style="width:100%">
<tbody>
<tr>
<td><input class="cw-select" onclick="inputChangCarry(16)" type="radio"
name="carry">
十六进制
<input class="cw-select" onclick="inputChangCarry(10)" type="radio"
checked="" name="carry">
十进制
<input class="cw-select" onclick="inputChangCarry(8)" type="radio"
name="carry">
八进制
<input class="cw-select" onclick="inputChangCarry(2)" type="radio"
name="carry">
二进制
</td>
<td></td>
<td><input class="cw-select" onclick="inputChangAngle('d')" type="radio"
checked="" value="d" name="angle">
角度制
<input class="cw-select" onclick="inputChangAngle('r')" type="radio"
value="r" name="angle">
弧度制
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table style="width:100%">
<tbody>
<tr>
<td><input class="cw-select" onclick="inputshift()" type="checkbox"
name="shiftf">
上档功能
<input class="cw-select" onclick="inputshift()" type="checkbox" name="hypf">
双曲函数
</td>
<td><input class="cw-show" readonly size="3" name="bracket">
<input class="cw-show" readonly size="3" name="memory">
<input class="cw-show" readonly size="3" name="operator">
</td>
<td align="right"><input class="cw-tpl" onclick="backspace()" type="button"
value=" 退格 ">
<input class="cw-tpl" onclick="document.calc.display.value = 0 "
type="button" value=" 清屏 ">
<input class="cw-tpl" onclick="clearall()" type="button" value=" 全清">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr align="middle">
<td><input class="cw-fn"
onclick="inputfunction('pi','pi')"
type="button" value=" PI " name="pi"></td>
<td><input class="cw-fn"
onclick="inputfunction('e','e')"
type="button" value=" E " name="e"></td>
<td><input class="cw-fn"
onclick="inputfunction('dms','deg')"
type="button" value="d.ms" name="bt"></td>
</tr>
<tr align="middle">
<td><input class="cw-fn" onclick="addbracket()" type="button"
value=" ( "></td>
<td><input class="cw-fn" onclick="disbracket()" type="button"
value=" ) "></td>
<td><input class="cw-fn"
onclick="inputfunction('ln','exp')"
type="button" value=" ln " name="ln"></td>
</tr>
<tr align="middle">
<td><input class="cw-fn"
onclick="inputtrig('sin','arcsin','hypsin','ahypsin')"
type="button" value="sin " name="sin"></td>
<td><input class="cw-fn" onclick="operation('^',7)"
type="button" value="x^y "></td>
<td><input class="cw-fn"
onclick="inputfunction('log','expdec')"
type="button" value="log " name="log"></td>
</tr>
<tr align="middle">
<td><input class="cw-fn"
onclick="inputtrig('cos','arccos','hypcos','ahypcos')"
type="button" value="cos " name="cos"></td>
<td><input class="cw-fn"
onclick="inputfunction('cube','cubt')"
type="button" value="x^3 " name="cube"></td>
<td><input class="cw-fn"
onclick="inputfunction('!','!')"
type="button" value=" n! "></td>
</tr>
<tr align="middle">
<td><input class="cw-fn"
onclick="inputtrig('tan','arctan','hyptan','ahyptan')"
type="button" value="tan " name="tan"></td>
<td><input class="cw-fn"
onclick="inputfunction('sqr','sqrt')"
type="button" value="x^2 " name="sqr"></td>
<td><input class="cw-fn"
onclick="inputfunction('recip','recip')"
type="button" value="1/x "></td>
</tr>
</tbody>
</table>
</td>
<td width="30"></td>
<td>
<table>
<tbody>
<tr>
<td><input class="cw-tpl" onclick="putmemory()" type="button"
value=" 储存 "></td>
</tr>
<tr>
<td><input class="cw-tpl" onclick="getmemory()" type="button"
value=" 取存 "></td>
</tr>
<tr>
<td><input class="cw-tpl" onclick="addmemory()" type="button"
value=" 累存 "></td>
</tr>
<tr>
<td><input class="cw-tpl" onclick="multimemory()" type="button"
value=" 积存 "></td>
</tr>
<tr>
<td><input class="cw-tpl" onclick="clearmemory()" type="button"
value=" 清存 "></td>
</tr>
</tbody>
</table>
</td>
<td width="30"></td>
<td>
<table>
<tbody>
<tr align="middle">
<td><input class="cw-num" onclick="inputkey('7')"
type="button" value=" 7 " name="k7"></td>
<td><input class="cw-num" onclick="inputkey('8')"
type="button" value=" 8 " name="k8"></td>
<td><input class="cw-num" onclick="inputkey('9')"
type="button" value=" 9 " name="k9"></td>
<td><input class="cw-x" onclick="operation('/',6)"
type="button" value=" / "></td>
<td><input class="cw-tpl" onclick="operation('%',6)"
type="button" value="取余"></td>
<td><input class="cw-tpl" onclick="operation('&',3)"
type="button" value=" 与 "></td>
</tr>
<tr align="middle">
<td><input class="cw-num" onclick="inputkey('4')"
type="button" value=" 4 " name="k4"></td>
<td><input class="cw-num" onclick="inputkey('5')"
type="button" value=" 5 " name="k5"></td>
<td><input class="cw-num" onclick="inputkey('6')"
type="button" value=" 6 " name="k6"></td>
<td><input class="cw-x" onclick="operation('*',6)"
type="button" value=" * "></td>
<td><input class="cw-tpl"
onclick="inputfunction('floor','deci')"
type="button" value="取整" name="floor"></td>
<td><input class="cw-tpl" onclick="operation('|',1)"
type="button" value=" 或 "></td>
</tr>
<tr align="middle">
<td><input class="cw-num" onclick="inputkey('1')"
type="button" value=" 1 "></td>
<td><input class="cw-num" onclick="inputkey('2')"
type="button" value=" 2 " name="k2"></td>
<td><input class="cw-num" onclick="inputkey('3')"
type="button" value=" 3 " name="k3"></td>
<td><input class="cw-x" onclick="operation('-',5)"
type="button" value=" - "></td>
<td><input class="cw-tpl" onclick="operation('<',4)"
type="button" value="左移"></td>
<td><input class="cw-tpl"
onclick="inputfunction('~','~')"
type="button" value=" 非 "></td>
</tr>
<tr align="middle">
<td><input class="cw-num" onclick="inputkey('0')"
type="button" value=" 0 "></td>
<td><input class="cw-num" onclick="changeSign()" type="button"
value="+/-"></td>
<td><input class="cw-num" onclick="inputkey('.')"
type="button" value=" . " name="kp"></td>
<td><input class="cw-x" onclick="operation('+',5)"
type="button" value=" + "></td>
<td><input class="cw-fn cw-enter" onclick="result()"
type="button" value=" ＝ "></td>
<td><input class="cw-tpl" onclick="operation('x',2)"
type="button" value="异或"></td>
</tr>
<tr align="middle">
<td><input class="cw-x" disabled=""
onclick="inputkey('a')" type="button"
value=" A " name="ka"></td>
<td><input class="cw-x" disabled=""
onclick="inputkey('b')" type="button"
value=" B " name="kb"></td>
<td><input class="cw-x" disabled=""
onclick="inputkey('c')" type="button"
value=" C " name="kc"></td>
<td><input class="cw-x" disabled=""
onclick="inputkey('d')" type="button"
value=" D " name="kd"></td>
<td><input class="cw-x" disabled=""
onclick="inputkey('e')" type="button"
value=" E " name="ke"></td>
<td><input class="cw-x" disabled=""
onclick="inputkey('f')" type="button"
value=" F " name="kf"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
<a href="https://www.aode8.com/" target="_blank" class="center-link">奥德彪学习网</a>
</body>
</html>
阅读剩余
