一、项目目标及要求
1.1 项目目标
熟练应用htm的标签设计页面
熟练应用js设计交互的函数。
1.2 项目要求
实现图示效果
使用html及js设计简易计算器
在这里插入图片描述
图1-2-1
二、项目实现过程
2.1 项目实现过程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用html及js设计简易计算器</title>
<script type = "text/javascript">
//定义一个带参数的方法
function calc(sign)
{
var firstValue = document.getElementById("txtNum1").value;
var secondValue = document.getElementById("txtNum2").value;
var resultvalue;
//将数值全音部阵转浮点,为做除法做准备
var num1 = parseFloat(firstValue);
var num2 = parseFloat(secondValue);
if(sign == "+")
{
resultvalue = num1 + num2;
}
else if(sign == "-")
{
resultvalue = num1 - num2;
}
else if(sign == "*")
{
resultvalue = num1 * num2;
}
else if
(sign == "/")
{
resultvalue = num1 / num2 ;
}
else
{
alert("符号不正确!");
}
document.getElementById("txtresult" ).value = resultvalue;
}
</script>
</head>
<body>
<form action = " " method = "post" id = "myform">
<table border = "0">
<tr>
<td><img src = "images/shop.gif" width = "54" height = "54"></td>
<td colspan = "3">
<H3>购物简易计算器(版权所有:XXX)</H3>
</td>
</tr>
<tr>
<td>第一个数</td>
<td colspan = "3">
<INPUT name = "txtNum1" type = "text" id = "txtNum1" size = "25">
</td>
</tr>
<tr>
<td>第二个数</td>
<td colspan = "3">
<INPUT name = "txtNum2" type = "text" id = "txtNum2" size = "25">
</td>
</tr>
<tr>
<td>运算</td>
<td colspan = "3">
<INPUT name = "addButton2" type = "button" id = "addButton2" value = " + " onclick = "calc('+')"/>
<INPUT name = "subButton2" type = "button" id = "subButton2" value = " - " onclick = "calc('-')"/>
<INPUT name = "mulButton2" type = "button" id = "mulButton2" value = " * " onclick = "calc('*')"/>
<INPUT name = "divButton2" type = "button" id = "divButton2" value = " / " onclick = "calc('/')"/>
</td>
</tr>
<tr>
<td>计算结果</td>
<td colspan = "3">
<INPUT name = "txtresult" type = "text" id = "txtresult" size = "25">
</td>
</tr>
</table>
</form>
</body>
</html>
