計算機介面
計算機介面程式碼
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>計算機</title>
<style>
#div {
width: 960px;
height: 1100px;
}
#title {
background-color: #E1E1E1;
width: 960px;
height: 200px;
display: block;
margin: auto;
}
#type {
background-color: #808080;
width: 960px;
height: 40px;
display: block;
margin: auto;
}
#footer {
background-color: #808080;
height: 200px;
width: 960px;
margin-top: 686px;
}
.clearFloat {
clear: both;
}
/*游標變色*/
th:hover {
background-color: black;
}
th, td {
border: 1px solid white;
padding: 1px;
}
table {
border-spacing: 1px;
border-collapse: collapse;
width: 100%;
margin: 0auto;
}
#MyBlog {
position: fixed; /*固定在網頁上不隨卷軸移動，若要隨卷軸移動用absolute*/
top: 50%; /*設置垂直位置*/
right: -50px; /*設置水平位置，依所放的內容多寡需要自行手動調整*/
background: #c6c6c6; /*背景顏色*/
padding: 10px 10px;
border-radius: 100px; /*圓角*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 90px;
height:40px;
}
#MyBlog:hover { /*當滑鼠移至此區塊時，伸縮區塊*/
right:-20px;
width: 270px;
height: 40px;
}
#MyBlog #title {
padding-right: 5px; /*讓標題與連結中間有空隙*/
height: 40px;
width: 450px;
}
</style>
</head>
<body background="灰磚.jpg">
<div id="title">
<img src="計算機2.jpg" alt="計算機" height="200" width="960" style="display:block; margin:auto;" />
</div>
<div id="type">
<table border="0" style="height:40px;width:960px">
<tr>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px;" ><a href="主頁.html" style="text-decoration:none;color:white">個人簡介</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="課表改.html" style="text-decoration:none;color:white">個人課表</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="最愛音樂.html" style="text-decoration:none;color:white">最愛音樂</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="最愛遊戲.html" style="text-decoration:none;color:white">最愛遊戲</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px"><a href="留言板改.html" style="text-decoration:none;color:white">留言板</a></th>
<th style="height:35px;width:120px;font-family:微軟正黑體;font-size:18px" bgcolor="black"><a href="計算機改.html" style="text-decoration:none;color:white">計算機</a></th>
</tr>
<table>
</div>
<div id="content">
<center>
<table style="height:660px;width:960px;" border="0">
<caption style="font-family:微軟正黑體;font-size:20px;color:white;background-image: url(灰色.jpg);">
計算機
</caption>
<tr>
<td align="center" colspan="6" style="background-image: url(灰色.jpg);">
<input align="right" type="text" value="0" id="box" style="height:50px;width:200px;font-size:20px;"/>
</td>
</tr>
<tr align="center" >
<td style="background-image: url(灰色.jpg);"> <input id="C" type="button" value="C" onClick="buttonM('C')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input id="mAdd" type="button" value="M+" onClick="buttonM('M+')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input id="mMinus" type="button" value="M-" onClick="buttonM('M-')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="/" onClick="operBtn('/')" style="height:50px;width:200px;font-size:20px;"> </td>
</tr>
<tr align="center">
<td style="background-image: url(灰色.jpg);"> <input type="button" value="7" onClick="numBtn('7')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="8" onClick="numBtn('8')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="9" onClick="numBtn('9')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="*" onClick="operBtn('*')" style="height:50px;width:200px;font-size:20px;"> </td>
</tr>
<tr align="center">
<td style="background-image: url(灰色.jpg);"> <input type="button" value="4" onClick="numBtn('4')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="5" onClick="numBtn('5')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="6" onClick="numBtn('6')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="-" onClick="operBtn('-')" style="height:50px;width:200px;font-size:20px;"> </td>
</tr>
<tr align="center">
<td style="background-image: url(灰色.jpg);"> <input type="button" value="1" onClick="numBtn('1')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="2" onClick="numBtn('2')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="3" onClick="numBtn('3')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="+" onClick="operBtn('+')" style="height:50px;width:200px;font-size:20px;"> </td>
</tr>
<tr align="center">
<td style="background-image: url(灰色.jpg);" colspan="2"> <input type="button" value="0" onClick="numBtn('0')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="." onClick="numBtn('.')" style="height:50px;width:200px;font-size:20px;"> </td>
<td style="background-image: url(灰色.jpg);"> <input type="button" value="=" onClick="equal()" style="height:50px;width:200px;font-size:20px;"> </td>
</tr>
</table>
</div>
<div id="MyBlog">
<span id="title">
<a href="主頁.html"><img src="個人.jpg" alt="個人介紹" height="40" width="40" /></a>
<a href="課表改.html"><img src="學校.jpg" alt="課表" height="40" width="40" /></a>
<a href="最愛音樂.html"><img src="音樂.jpg" alt="音樂" height="40" width="40" /></a>
<a href="最愛遊戲.html"><img src="遊戲.jpg" alt="遊戲" height="40" width="40" /></a>
<a href="留言板改.html"><img src="留言.jpg" alt="留言板" height="40" width="40" /></a>
<a href="計算機改.html"><img src="小計算機.jpg" alt="計算機" height="40" width="40" /></a>
</span>
</div>
<center>
<div id="footer">
<img src="計算機.jpg" alt="計算機" height="200" width="960" style="display:block;background-repeat:repeat-x;" />
</div>
</body>
</html>
計算機程式碼
<script>
var temp = 0;
var strOper = 0;
var valueM = 0;
function numBtn(str) {
if (strOper == null) {
document.getElementById("box").value = str;
strOper = 0;
return;
};
if (document.getElementById("box").value == 0) {
document.getElementById("box").value = str;
} else {
document.getElementById("box").value += str;
}
}
function operBtn(str) {
equal();
valueA = document.getElementById("box").value;
strOper = str;
document.getElementById("box").value = 0;
}
function equal() {
switch (strOper) {
case '+':
document.getElementById("box").value = parseFloat(valueA) + parseFloat(document.getElementById("box").value);
break;
case '-':
document.getElementById("box").value = parseFloat(valueA) - parseFloat(document.getElementById("box").value);
break;
case '*':
document.getElementById("box").value = parseFloat(valueA) * parseFloat(document.getElementById("box").value);
break;
case '/':
document.getElementById("box").value = parseFloat(valueA) / parseFloat(document.getElementById("box").value);
break;
default:
break;
}
temp = null;
strOper = null;
}
function buttonM(str) {
switch (str) {
case 'M+':
valueM += parseFloat(document.getElementById("box").value);
break;
case 'M-':
valueM -= parseFloat(document.getElementById("box").value);
break;
case 'C':
temp = 0;
strOper = 0;
valueM = 0;
document.getElementById("box").value = '0';
break;
default:
break;
}
}
</script>
計算機程式碼參考
http://lova.logdown.com/posts/162837-html-javascript-3-the-after-school-exercise-calculator
返回目錄