html项⽬实例——简易计算器⼀.
在通过⼀段时间的学习，制作出⼀个简易计算器。
⼆.实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
</head>
<style>
*{ font-size:36px;}
#t{
width:480px;
height:80px;
text-align: right;
font-size: 48px;
background-color: white;
}
.number{
width:120px;
height:80px;
background-color:pink;
margin: 0;
display: block;
}
.signs{
width:120px;
height:80px;
background-color:  rgb(235, 199, 235);
margin: 0;
display: block;
}
.shaw{
width:120px;
height:80px;
background-color:  rgb(235, 199, 235);
margin: 0;
display: block;
}
.equal{
width:120px;
height:80px;
background-color:  rgb(235, 199, 235);
margin: 0;
display: block;
}
.kuohao{
width: 60px;
height: 80px;
float: left;
align-self: 0;
background-color:  rgb(235, 199, 235);
}
table td,table th{
border:1px solid rgb(235, 199, 235);
}
table tr:nth-child(odd){
background: rgb(223, 164, 164);
}
</style>
<script>
//设置标志，⽤于没有输⼊时显⽰0，以及有显⽰时清空    var flag=true;
function func(str){
var ElementById("t");
if(flag){
//清除没有输⼊时的0
网页计算器html代码t.value="";
}
//改变状态，不再清空内容
flag=false;
//将之前的内容和输⼊的内容相加，重新显⽰
t.value=t.value+str;
}
//回退⼀个数，相当于撤销
function backspace(){
var ElementById("t");
t.value=t.value.substr(0,t.value.length-1);    }
/
/清空显⽰内容
function AC(){
var ElementById("t");
//显⽰0
t.value="0";
//让下次输⼊可以清空0
flag=true;
}
//计算结果
function equals(){
var ElementById("t");
/
/将字符串转换为逻辑运算
t.value=eval(t.value);
}
</script>
<body>
<!--    内边距          外边距        边框        居中-->
<table cellpadding="0" cellspacing="0" border="0"  align="center" >
<tr>
<td colspan="4">
<input type="text" value="0" id="t" />
</td>
</tr>
<tr>
<td><input type="button" class="number" value="7"  onClick="func('7')"/></td>
<td><input type="button" class="number" value="8" onClick="func('8')"/></td>
<td><input type="button" class="number" value="9" onClick="func('9')"/></td>
<td><input type="button" class="signs" value="/" onClick="func('/')"/></td>                    </tr>
<tr>
<td><input type="button" class="number" value="4" onClick="func('4')"/></td>
<td><input type="button" class="number" value="5" onClick="func('5')"/></td>
<td><input type="button" class="number" value="6" onClick="func('6')"/></td>
<td><input type="button" class="signs" value="*" onClick="func('*')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="1" onClick="func('1')"/></td>
<td><input type="button" class="number" value="2" onClick="func('2')"/></td>
<td><input type="button" class="number" value="3" onClick="func('3')"/></td>
<td><input type="button" class="signs" value="-" onClick="func('-')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="0" onClick="func('0')"/></td>
<td><input type="button" class="shaw" value="." onClick="func('.')"/></td>
<td><input type="button" class="number" value="00" onClick="func('00')"/></td>                <td><input type="button" class="signs" value="+" onClick="func('+')"/></td>
</tr>
<tr>
<td>
<input type="button" class="kuohao" value="(" onClick="func('(')"/>
<input type="button" class="kuohao" value=")" onClick="func(')')"/>
</td>
<td><input type="button"  class="shaw" value="后退" onClick="backspace()"/></td>            <td>
<input type="button" class="shaw" value="清除" onClick="AC()"/>
</td>
<td rowspan="2"><input type="button" value="=" class="equal" onClick="equals()"/></td>
</tr>
</table>
</body>
</html>
三.结果
可以实现计算功能，完成“甲⽅”需求。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。