[實戰]網頁版計算器的編寫
實現效果如圖顯示
————————————————————————————————————————————————————————
<宣告 資料夾 先建一個名為 網頁計算器 的資料夾 在裡面分別加html css js 三個資料夾 程式碼檔案分別儲存在相應的資料夾>
1.html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>網頁計算器</title>
<link rel="stylesheet" type="text/css" href="../css/jisuanqi.css">
<script type="text/javascript" src="../js/jisuanqi.js"></script>
</head>
<body>
<table cellpadding="10px">
<tr>
<td colspan="3" id="result">開始計算吧！</td>
<td><input class="anniu" type="button" name="" value="C" onclick="clearData()"></td>
</tr>
<tr>
<td><input class="anniu" type="button" name="" value="1" onclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="2" onclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="3" onclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="+" onclick="showData(this.value)"></td>
</tr>
<tr>
<td><input class="anniu" type="button" name="" value="4" onclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="5" onclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="6" onclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="-" onclick="showData(this.value)"></td>
</tr>
<tr>
<td><input class="anniu" type="button" name="" value="7" onclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="8" onclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="9" onclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="*" onclick="showData(this.value)"></td>
</tr>
<tr>
<td><input class="anniu" type="button" name="" value="0" onclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="." onclick="showData(this.value)"></td>
<td><input class="anniu" type="button" name="" value="=" onclick="calculate()"></td>
<td><input class="anniu" type="button" name="" value="/" onclick="showData(this.value)"></td>
</tr>
</table>
</body>
</html>
2.css部分
table{
border:1px solid #ccc;
}
.anniu{
width:50px;
height:50px;
}
td{
border:1px solid #ccc;
}
#result{
text-align: right;
font-size: 26px;
font-weight: bold;
font-family: '黑體';
}
3.js檔案
var str="";
function showData(val){
str=str+val;
document.getElementById("result").innerHTML = str;
}
function calculate(){
document.getElementById("result").innerHTML = "";
var resultNum=eval(str);
document.getElementById("result").innerHTML = resultNum;
str=resultNum;
}
function clearData(){
document.getElementById("result").innerHTML = "";
document.getElementById("result").innerHTML = 0;
str="";
}
—————————————————————————————————————————————————————————
勤勞的人總是更努力，當完成專案的喜悅是別人所不能理解的。