寫一個簡單的計算器
由於代碼不多，而且爲了方便，就把css和js都寫在html文件裏就行了。
1. 搭建一個簡單的架子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算器</title>
</head>
<body>
<table align="center">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
<td>C</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
<td rowspan="3">=</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr>
<td>00</td>
<td>0</td>
<td>.</td>
<td>/</td>
</tr>
</table>
</body>
</html>
2. 增加一些樣式
<style>
*{
margin: 0;
padding: 0;
}
table{
/*表格的樣式*/
width:500px;
height:500px;
border: 1px solid black;
background-color: #999999;
cellspacing:0px;
}
td{
/*td節點正常的樣式*/
cursor: pointer;
width:40px;
height: 30px;
border: 1px solid #FFFFFF;
background: #999999;
color: #FFFFFF;
text-align: center;
font-weight: bold;
font-family: "微軟雅黑";
}
td:hover{
/*鼠標懸停在td節點時的樣式*/
background: #008000;
}
</style>
3. js實現計算功能
注意，需要因爲使用了jQuery，所以需要先導入該框架，就是下面代碼的第一個script
<script src="./jquery-1.9.1.min.js"></script>
<script>
$(function () {
var str = "";
// 獲取輸入框的節點
var $input = $("table tr:eq(0) td");
// 用戶點擊任何一個td節點都會觸發下面的點擊事件
$("td").click(function () {
// 獲取用戶點擊的那個td節點的文本內容
var text = $(this).html();
console.log(text);
if (text == "="){
try{
/* 當用戶點擊的是=的時候，我們應該計算此時表達式的值，然後在輸入框（第一個td節點）打印出來
* 下面代碼中的eval(str)，就是計算表達式的值，如果表達式不是一個正規的數學表達式，那麼會拋出異常
*/
$input.html(eval(str));
} catch (e) {
// 說明拋出了異常，那麼我們應該在輸入框提示用戶輸入非法
$input.html("<span style='color: red;'>非法輸入!</span>");
} finally {
// 最後讓表達式變爲最初的空字符串
str = "";
}
} else if (text == "C"){
// 用戶點擊了C這個節點，那麼表示要清空輸入框中的內容
str = "";
$input.html(str);
} else {
// 表達式累加，然後在輸入框顯示。
str += text;
$input.html(str);
}
})
})
</script>
