码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-10-18 18:07:23      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

<!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-width:3px" />
        </td>
 		<td align="center">
        	<input type="button" id="button" value="2" onclick="enter(this.form,two)" style="	 				border-style:double;border-width:3px" />
        </td>
 		<td align="center">
        <input type="button" id="button"value="3" onclick="enter(this.form,three)" 
        style="border-style:double;border-width:3px" />
        </td>
       <td align="center">
       		<input type="button" id="button"
 		value="+" onclick="enter(this.form,plus)" style="border-style:double;border-width:3px" 			/>
       </td>
	</tr>
	<tr>
		<td align="center">
        <input type="button" id="button"
 		value="4" onclick="enter(this.form,four)" style="border-style:double;border-width:3px" 			/>
		 </td>
 		<td align="center">
        <input type="button" id="button"
 			value="5" onclick="enter(this.form,five)" style="border-style:double;border-width:	           3px" />
        </td>
  		<td align="center">
        <input type="button" id="button"
		 value="6" onclick="enter(this.form,six)" style="border-style:double;border-width:3px" 			/>
         </td>
 		<td align="center">
        	<input type="button" id="button"
 			value="-" onclick="enter(this.form,minus)" style="border-style:double;border-width:3px" />
 		</td>
	</tr>
	<tr>
		<td align="center"><input type="button" id="button"
 			value="7" onclick="enter(this.form,seven)" style="border-style:double;border-width:3px" />
 		</td>
 		<td align="center"><input type="button" id="button"
 			value="8" onclick="enter(this.form,eigth)" style="border-style:double;border-width:3px" />
 		</td>
 		<td align="center"><input type="button" id="button"
 			value="9" onclick="enter(this.form,nine)" style="border-style:double;border-width:3px" />
         </td>
 		<td align="center"><input type="button" id="button"
			 value="*" onclick="enter(this.form,multiply)" style="border-style:double;border-width: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-width:3px" />
        </td>
        <td align="center"><input type="button" id="button"
  			value="." onclick="enter(this.form,decimal)" style="border-style:double;border-width:3px" />
 		</td>
 		<td align="center"><input type="button" id="button"
 		value="/" onclick="enter(this.form,divide)" style="border-style:double;border-width: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>

 技术分享

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

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!