效果展示：
代碼展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
font-family: "微軟雅黑";
font-size: 20px;
margin: 0px;
padding: 0px;
}
#all{
width: 250px;
height: 250px;
background-color: darkseagreen;
margin:0px auto;
}
ul{
list-style: none;
}
.distance{
display: inline-block;
margin-top: 10px;
}
.distance_td{
width: 45px;
}
</style>
</head>
<body>
<div id="all">
<ul>
<li>
第一個數字:<input id="figure" type="text" value=""/>
</li>
<li>
第二個數字:<input id="figure1" type="text" value="" />
</li>
<li>
<ul>
<li class="distance">
<input type="button" onmousemove="add('+')" value="+" class="distance_td"/>
</li>
<li class="distance">
<input type="button" onclick="add('-')" value="-" class="distance_td"/>
</li>
<li class="distance">
<input type="button" onclick="add('*')" value="*" class="distance_td"/>
</li>
<li class="distance">
<input type="button" onclick="add('/')" value="/" class="distance_td"/>
</li>
</ul>
</li>
<li>
計算結果:<input id="result" type="text" value="" />
</li>
</ul>
</div>
<script type="text/javascript">
var figID=document.getElementById("figure");
var fig1ID=document.getElementById("figure1");
var rest=document.getElementById("result");
var result;
function add(e){
switch(e){
case '+':
result=parseInt(figID.value)+parseInt(fig1ID.value);
break;
case '-':
result=parseInt(figID.value)-parseInt(fig1ID.value);
break;
case '*':
result=parseInt(figID.value)*parseInt(fig1ID.value);
break;
case '/':
result=parseInt(figID.value)/parseInt(fig1ID.value);
break;
default:
break;
}
rest.value=result;
}
</script>
</body>
</html>