利用js 语言编写简易的计算器,首先讲解一下思路
首先用table标签设计表格,再就是用script标签设计表格的格式
用 rowspan colspan 向上向下合并单元格 对单元格格式进行编写
以下是编写简易计算器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易计算器</title>
</head>
<script type="text/javascript">
function jisuan(jy){
var num1=document.getElementById('num1').value;
var num2=document.getElementById('num2').value;
var result="";
switch(jy){
case"+":
result=parseInt(num1)+parseInt(num2);
break;
case"-":
result=parseInt(num1)-parseInt(num2);
break;
case"*":
result=parseInt(num1)*parseInt(num2);
break;
case"/":
result=parseInt(num1)/parseInt(num2);
break;
}
document.getElementById('result').value=result;
}
</script>
<style type="text/css">
table{
width:500px;
margin:10px auto;
border:1px solid #CCF;
border-collapse:collapse;
}
td,th{
border:1px solid #CCF;
font-size:20px;
}
tr,td{
height:40px;
font-size: 16px;
}
input[type=text]{
height:20px;
width:220px;
}
input[type=button]{
height:30px;
width:66px;
background:blue;
color:white;
border:0;
margin-top:10px;
margin-left: 10px;
}
</style>
<body>
<table>
<tr>
<th colspan="3">简易计算器</th>
</tr>
<tr>
<td>第一个数</td>
<td><input type="text" id='num1' /></td>
<td rowspan="4"><input type="button" value='+' οnclick="jisuan('+')" />
<br />
<input type="button" value='-' οnclick="jisuan('-')" />
<br />
<input type="button" value='*' οnclick="jisuan('*')" />
<br />
<input type="button" value='/' οnclick="jisuan('/')" />
<br /></td>
</tr>
<tr>
<td>第二个数</td>
<td><input type="text" id='num2' /></td>
</tr>
<tr>
<td>结果</td>
<td><input type="text" id='result' /></td>
</tr>
<tr>
<td colspan="2">运算方法:先两个数,在选择算法</td>
</table>
</body>
</html>