一個基於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，方法感覺也是比較蠢，懇請各位大佬給出修改建議。