html和js实现计算器功能的也是很容易的,本文主要和大家分享html和js实现简单的计算器,希望能帮助到大家。
下面是代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="untitled.css">
</head>
<script type="text/javascript">
var result="";
function jisuan(num){
if(num=="="){
document.form1.text.value=eval(result);
}else{
result=result+num;
document.form1.text.value=result;
}
}
</script>
<body>
<p class="box">
<form action="" class="form1" name="form1">
<p class="header">
<input type="text" id="text" name="text" class="text"/>
</p>
<p class="nav">
<table class="table">
<tr>
<td> <input id="1" style="height:55px; width:55px;" type="button" value="1" onclick="jisuan(this.id)"/> </td>
<td> <input id="2" style="height:55px; width:55px;" type="button" value="2" onclick="jisuan(this.id)"/> </td>
<td> <input id="3" style="height:55px; width:55px;" type="button" value="3" onclick="jisuan(this.id)"/> </td>
<td> <input id="+" style="height:55px; width:55px;" type="button" value="+" onclick="jisuan(this.id)"/> </td>
</tr>
<tr>
<td> <input id="4" style="height:55px; width:55px;" type="button" value="4" onclick="jisuan(this.id)"/> </td>
<td> <input id="5" style="height:55px; width:55px;" type="button" value="5" onclick="jisuan(this.id)"/> </td>
<td> <input id="6" style="height:55px; width:55px;" type="button" value="6" onclick="jisuan(this.id)"/> </td>
<td> <input id="-" style="height:55px; width:55px;" type="button" value="-" onclick="jisuan(this.id)"/> </td>
</tr>
<tr>
<td> <input id="7" style="height:55px; width:55px;" type="button" value="7" onclick="jisuan(this.id)"/> </td>
<td> <input id="8" style="height:55px; width:55px;" type="button" value="8" onclick="jisuan(this.id)"/> </td>
<td> <input id="9" style="height:55px; width:55px;" type="button" value="9" onclick="jisuan(this.id)"/> </td>
<td> <input id="*" style="height:55px; width:55px;" type="button" value="*" onclick="jisuan(this.id)"/> </td>
</tr>
<tr>
<td> <input id="/" style="height:55px; width:55px;" type="button" value="/" onclick="jisuan(this.id)"/> </td>
<td> <input id="0" style="height:55px; width:55px;" type="button" value="0" onclick="jisuan(this.id)"/> </td>
<td> <input id="." style="height:55px; width:55px;" type="button" value="." onclick="jisuan(this.id)"/></td>
<td> <input id="=" style="height:55px; width:55px;" type="button" value="=" onclick="jisuan(this.id)"/> </td>
</tr>
</table>
</p>
</form>
</p>
</body>
</html>
相关推荐:
html怎样实现简单计算器
js实现简单四则运算计算器功能
js实现的简单四则运算计算器功能示例
以上就是html和js实现简单的计算器的详细内容。