一个基于HTML/CSS和原生Js的简单计算器。
大体思路是通过Button提交获取算式，然后交付eval() 函数计算。eval(String) 函数可计算某个字符串，并执行其中的的 JavaScript 代码。如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。
<script type="text/javascript">
var a=eval("x=10;y=20;document.write(x*y)");
var b=eval("2+3");
/**a的输出结果为200，b的输出结果为5**/
</script>
因为程序比较简单，以下是全部代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<style>
*{
margin: 0;
padding: 0;
border-spacing:0px;
border: none;
}
table{
background-color: #ff6000;
}
table tr{
height: 100px;
}
table tr th{
width: 110px;
background-color: #000;
color: #fff;
font-size: 40px;
}
table tr th input
{
width: 100px;
height: 100px;
background-color: #000;
border: none;color: #fff;
font-size: 40px;
font-family: "微软雅黑";
}
</style>
<script>
var t = ""; //存贮算式
var jieguo = "";//存储结果
var t1;
function getValue(x) //获取按键值
{
t = t + x;
document.getElementById("textview").innerHTML = t;
}
function backspace() //删除键
{
t = t.substring(0,t.length-1);
document.getElementById("textview").innerHTML = t;
}
function yunsuan()
{
t1 = t;
t = t.replace(/\×/g,"*");
t = t.replace(/\√/g,"Math.sqrt"); // 正则表达式 全部√替换成Math.sqrt 代表开方
t = t.replace(/\^/g,"**"); // 正则表达式 全部^替换成**代表指数
try{ //try验证式子正确性
jieguo = eval(t);
document.getElementById("textview").innerHTML = t1+"<br />"+jieguo;
}
catch(exception)
{
alert("算式出错！请重新输入！");
clearall();
}
}
function clearall() //c建清理
{
t = "";
t1 = "";
jieguo = "";
document.getElementById("textview").innerHTML = "";
}
</script>
</head>
<body>
<form>
<table>
<tr>
<th colspan="6" style="background-color: #000; height: 200px;" id="textview"></th>
</tr>
<tr>
<th><input type="button" value="1" onclick="getValue(this.value)"/></th>
<th><input type="button" value="2" onclick="getValue(this.value)"/></th>
<th><input type="button" value="3" onclick="getValue(this.value)"/></th>
<th><input type="button" value="+" onclick="getValue(this.value)"/></th>
<th colspan="2"><input type="button" value="del" onclick="backspace()"/></th>
</tr>
<tr>
<th><input type="button" value="4" onclick="getValue(this.value)"/></th>
<th><input type="button" value="5" onclick="getValue(this.value)"/></th>
<th><input type="button" value="6" onclick="getValue(this.value)"/></th>
<th><input type="button" value="-" onclick="getValue(this.value)"/></th>
<th><input type="button" value="(" onclick="getValue(this.value)"/></th>
<th><input type="button" value=")" onclick="getValue(this.value)"/></th>
</tr>
<tr>
<th><input type="button" value="7" onclick="getValue(this.value)"/></th>
<th><input type="button" value="8" onclick="getValue(this.value)"/></th>
<th><input type="button" value="9" onclick="getValue(this.value)"/></th>
<th><input type="button" value="×" onclick="getValue(this.value)"/></th>
<th><input type="button" value="^" onclick="getValue(this.value)"/></th>
<th style="background-color: #ff6000;" rowspan="2"><input type="button" value="=" style="background-color: #ff6000;" onclick="yunsuan()"/></th>
</tr>
<tr>
<th style="background-color: #ff6000;"><input type="button" value="c" style="background-color: #ff6000;" onclick="clearall()"/></th>
<th><input type="button" value="0" onclick="getValue(this.value)"/></th>
<th><input type="button" value="." onclick="getValue(this.value)"/></th>
<th><input type="button" value="/" onclick="getValue(this.value)"/></th>
<th><input type="button" value="√(" onclick="getValue(this.value)"/></th>
</tr>
</table>
</form>
</body>
</html>
本人初学js，这里只是写出来仅供参考，因为代码不可避免存在bug，方法感觉也是比较蠢，恳请各位大佬给出修改建议。