编写简易计算器小程序要一定的h5、css和js的编程基础，才能更好的理解以下代码，本程序分为三个部分，分别是html、css 和JavaScript程序文件。
Html程序文件如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>计算器表单</title>
<link href="CSS.css" rel="stylesheet" />
</head>
<body>
<div class="logo">
<img class="p1" src="小.gif" />
</div>
<h1 class="t1">简易计算器</h1>
<div class="d1">
<form>
<p>第一个数：<label><input type="text" id="n1" /></label></p>
<p>第二个数：<label><input type="text" id="n2" /></label></p>
<p><input type="button" value=" + " onclick="getResult('+')" />
<input type="button" value=" - " onclick="getResult('-')" />
<input type="button" value=" * " onclick="getResult('*')" />
<input type="button" value=" / " onclick="getResult('/')" /></p>
<p>计算结果：<input type="text" id="n3" /></p>
<p><input type="reset" style="width:100px;height:50px value="重置"/>
<input type="button" value=" 关闭 " onclick="window.close()"/>
</p>
</form>
</div>
<script type="text/javascript" src="js1.js"></script>
</body>
</html>Css.css程序文件如下：
@charset "utf-8";
body{
background:url(timg.jpg) center center;
background-size:cover;
margin: 0;
padding: 0;
position: relative;
}
.logo {
width:300px;
height:200px;
border:1px
}
.p1 {
float:left;
width:400px;
height:100px
}
.t1{
transform: translateY(-300%);
text-align: center;
color: #F00;
text-shadow: 0 8px 5px rgba(0,0,8,.3);
}
p{
text-align: center;
text-shadow: 0 2px 5px rgba(0,0,8,.3);
}
.d1{
transform: translateY(-70%);
width: 300px;
border: 1px solid write;
padding: auto;
margin: auto
}
/*.d2{
width: 300px;
border: 1px solid write;
padding: auto;
margin: auto
}js1.js文件如下：
alert("欢迎使用简易计算器！");
function getResult(id){
var n1 = parseFloat(document.getElementById("n1").value);
var n2 = parseFloat(document.getElementById("n2").value);
var result = "";
if(isNaN(n1) || isNaN(n2))
{
alert('请输入数字！');
return false;
}
switch(id)
{
case '+':
result=n1+n2;
break;
case '-':
result=n1-n2;
break;
case '*':
result=n1*n2;
break;
case '/':
if('0'==n2)
{
alert('分母不能为零！');
return false;
}
result=n1/n2;
break;
}
document.getElementById("n3").value = result
} time.jpg文件：点击打开链接
小.gif文件：点击打开链接
通过以上代码便可以实现一个简易计算器的功能了。
最终运行界面如下，该简易计算器可以实现简单的加减乘除功能：
