今天我们来讲一个关于制作一个简单的计算机网页的方法，来完成我们网页中简易的运算。注释用红色和蓝色表示，红色为较重要的地方，值得注意
<html lang="en">
<head><meta charset="UTF-8">
<!--记得写上标题，以方便我们更清楚-->
<title>计算器</title>
<!--建一个js文件夹-->
<script type="text/javascript">
<!--定义一个函数-->
function show(my){
<!--读num1字符值-->
var n1=document.getElementById('num1').value;
<!--将num1转化为数值型，以方便计算使用这一步尤为重要-->
var n2=document.getElementById('num2').value;
n2=parseInt(n2);
var answer='';
answer=parseInt('answer');
<!--建立一个条件语句，对函数读取的符号值进行判断，以便计算 -->
case '+':
answer=n1+n2;
break;
case '-':
answer=n1-n2;
break;
case '*':
answer=n1*n2;
break;
case '/':
answer=n1/n2;
break;
}
<!--输出计算的数-->
}
</script>
<!--对计算机外部样式进行设置-->
table{
width: 400px;
height: 200px;
border:1px solid #e1e1e1;
margin: 10px auto;
border-collapse: collapse;
}
th,td{
height: 37px;
border:1px solid #e1e1e1;
}
input[type="text"]{
width: 176px;
height: 19px;
border:1px solid #bfbfbf;
}
input[type="button"]{
width: 30px;
height: 30px;
background-color: #3fbe5b;
margin-top: 5px;
border:0;
margin-left: 5px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">简易计算器</th>
</tr>
<tr>
<td>第一个数字</td>
<td>
<!--输入第一个，并建立id进行函数读取-->
<input type="text" value="" id="num1" ></td>
<td rowspan="4">
<!--设置运算符号，并读取-->
<input type="button" value="-" οnclick="show('-')"><br>
<input type="button" value="*" οnclick="show('*')"><br>
<input type="button" value="/" οnclick="show('/')"><br>
</td>
</tr>
<tr>
<td>第二个数字</td>
<td>
<!--输入第二个数，并进行设置-->
<input type="text" value="" id="num2"></td>
</tr>
<tr>
<td>得数</td>
<!--输出得数-->
<td><input type="text" id="deshu" value=""></td></tr>
<tr>
<td colspan="2">提示信息</td>
</tr>
</table>
</body>
</html>
2616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
