设置一个table表格,主要用css样式设计和js程序设计。colspan为合并列,rowspan是合并行。输入数字后单击运算符号。代码如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<script type="text/javascript">
function mycomputer(op){
var num1=document.getElementById('num1').value;
var num2=document.getElementById('num2').value;
var n1=parseInt(num1);
var n2=parseInt(num2);
var answer='';
switch(op){
case '+':
answer=n1+n2;
break;
case '-':
answer=n1-n2;
break;
case '*':
answer=n1*n2;
break;
case '/':
answer=n1/n2;
break;
default:
}
document.getElementById('result').value=answer;
}
</script>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<script type="text/javascript">
function mycomputer(op){
var num1=document.getElementById('num1').value;
var num2=document.getElementById('num2').value;
var n1=parseInt(num1);
var n2=parseInt(num2);
var answer='';
switch(op){
case '+':
answer=n1+n2;
break;
case '-':
answer=n1-n2;
break;
case '*':
answer=n1*n2;
break;
case '/':
answer=n1/n2;
break;
default:
}
document.getElementById('result').value=answer;
}
</script>
<style type="text/css">
table{
width: 400px;
margin: auto;
border:2px solid #000;
border-collapse: collapse;
}
th,td{
border:1px solid #000;
}
td{
padding-left: 10px;
height: 35px;
font-size: 14px;
}
th{
height: 40px;
font-size: 16px;
}
input[type=text]{
height: 22px;
width: 180px;
border:1px solid #000;
}
input[type=button]{
height: 25px;
width:30px;
margin-top:10px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="4">简易计算器</th>
</tr>
<tr>
<td>第一个数</td>
<td colspan="2"><input type="text" value="" id="num1"></td>
<td rowspan="4">
<input type="button" value="+" οnclick="mycomputer('+')" ><br>
<input type="button" value="-" οnclick="mycomputer('-')" ><br>
<input type="button" value="*" οnclick="mycomputer('*')" ><br>
<input type="button" value="/" οnclick="mycomputer('/')"><br>
</td>
</tr>
<tr>
<td>第二个数</td>
<td colspan="2"><input type="text" value="" id="num2" οnclick=""></td>
</tr>
<tr>
<td>结果</td>
<td colspan="2"><input type="text" value="" id="result" οnclick=""></td>
</tr>
<tr>
<td colspan="3">运算方法:先填入两个数,再选择算法</td>
</tr>
</table>
</body>
</html>
table{
width: 400px;
margin: auto;
border:2px solid #000;
border-collapse: collapse;
}
th,td{
border:1px solid #000;
}
td{
padding-left: 10px;
height: 35px;
font-size: 14px;
}
th{
height: 40px;
font-size: 16px;
}
input[type=text]{
height: 22px;
width: 180px;
border:1px solid #000;
}
input[type=button]{
height: 25px;
width:30px;
margin-top:10px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="4">简易计算器</th>
</tr>
<tr>
<td>第一个数</td>
<td colspan="2"><input type="text" value="" id="num1"></td>
<td rowspan="4">
<input type="button" value="+" οnclick="mycomputer('+')" ><br>
<input type="button" value="-" οnclick="mycomputer('-')" ><br>
<input type="button" value="*" οnclick="mycomputer('*')" ><br>
<input type="button" value="/" οnclick="mycomputer('/')"><br>
</td>
</tr>
<tr>
<td>第二个数</td>
<td colspan="2"><input type="text" value="" id="num2" οnclick=""></td>
</tr>
<tr>
<td>结果</td>
<td colspan="2"><input type="text" value="" id="result" οnclick=""></td>
</tr>
<tr>
<td colspan="3">运算方法:先填入两个数,再选择算法</td>
</tr>
</table>
</body>
</html>