html+js实现四则元算计算器

计算器

四则运算计算器






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>计算器</title> <h1>四则运算计算器</h1><hr /> </head> <body> <form name="calc"> <table border="1" bgcolor="#c0c0c0"> <tr> <td colspan=4> <input type="text" name="expr" size=30 action="compute(this.form)" /> </td> </tr> <tr> <td align="center"> <input type="button" id="button"value="1" onclick="enter(this.form,one)" style=" border-style:double;border-3px" /> </td> <td align="center"> <input type="button" id="button" value="2" onclick="enter(this.form,two)" style=" border-style:double;border-3px" /> </td> <td align="center"> <input type="button" id="button"value="3" onclick="enter(this.form,three)" style="border-style:double;border-3px" /> </td> <td align="center"> <input type="button" id="button" value="+" onclick="enter(this.form,plus)" style="border-style:double;border-3px" /> </td> </tr> <tr> <td align="center"> <input type="button" id="button" value="4" onclick="enter(this.form,four)" style="border-style:double;border-3px" /> </td> <td align="center"> <input type="button" id="button" value="5" onclick="enter(this.form,five)" style="border-style:double;border- 3px" /> </td> <td align="center"> <input type="button" id="button" value="6" onclick="enter(this.form,six)" style="border-style:double;border-3px" /> </td> <td align="center"> <input type="button" id="button" value="-" onclick="enter(this.form,minus)" style="border-style:double;border-3px" /> </td> </tr> <tr> <td align="center"><input type="button" id="button" value="7" onclick="enter(this.form,seven)" style="border-style:double;border-3px" /> </td> <td align="center"><input type="button" id="button" value="8" onclick="enter(this.form,eigth)" style="border-style:double;border-3px" /> </td> <td align="center"><input type="button" id="button" value="9" onclick="enter(this.form,nine)" style="border-style:double;border-3px" /> </td> <td align="center"><input type="button" id="button" value="*" onclick="enter(this.form,multiply)" style="border-style:double;border-3px" /> </td> </tr> <tr> <td colspan=2 align="center"><input type="button" id="button" value=" 0 " onclick="enter(this.form,zero)" style="border-style:double;border-3px" /> </td> <td align="center"><input type="button" id="button" value="." onclick="enter(this.form,decimal)" style="border-style:double;border-3px" /> </td> <td align="center"><input type="button" id="button" value="/" onclick="enter(this.form,divide)" style="border-style:double;border-3px" /> </td> </tr> <tr> <td colspan=2 align="center"><input type="button" id="button" value=" = " onclick="compute(this.form)"/> </td> <td colspan=2 align="center"> <input type="button" value="AC" size=10 onClick="clear(this.form)" /> </td> </tr> </table> </form> </body> </html>
<script type="text/javascript">
function compute(obj){
	obj.expr.value=eval(obj.expr.value);
		}
var one="1",two="2",three="3",four="4",five="5",six="6",seven="7",eigth="8",nine="9";
	var zero="0",plus="+",minus="-",multiply="*",divide="/",decimal=".";
	function enter(obj,string){
		obj.expr.value+=string;
		
		}
	function clear(obj){
		obj.expr.value= "";
		
		}


</script>

 

原文地址:https://www.cnblogs.com/jiangwenli/p/4889743.html