Rumah > Artikel > hujung hadapan web > HTML和JS实现简单的计算器
HTML和JS实现简单的计算器
- 小云云asal
- 2018-03-05 15:09:342065semak imbas
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怎样实现简单计算器
Atas ialah kandungan terperinci HTML和JS实现简单的计算器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML中相对路径和绝对路径的区别Artikel seterusnya：HTML5 Canvas的交互式地铁线路图实现代码