用JavaScript制作简单的计算器 
<html >
<head>

<title>简单计算器</title>
<style type="text/css">
	div{
		margin:auto;
		background-color:#ff4365;
		width:550px;
		height:280px;
		border:ridge #ff4365 4px;
	}
	table{
		width:500px;
		margin:auto;
		padding-top:10px;
	}
	td{
		height:20px;
		padding:2px 6px;

		text-align:center;
	}
	input{
		width:100px;
		height:35px;
		background:#99FFCC;
		font-size:16px;
		color:#0033CC;
	}
	.input1{
		width:494px;
		padding:0px;
		margin:0px;
		padding:5px;
		font-size:25px;
		background:#FFFF93;
		color:#000000;
	}
	h1{
		color:#ff4365;
		font-size:50px;
		border:groove 2px #ff4365;
		width:160px;
		background:#99FFCC;
	}
</style>
<script type="text/javascript">
	var num;
	function buttontext(num)
	{
		
		document.getElementById('1').value+=document.getElementById(num).value;
	}
	function compute()
	{
		document.getElementById('1').value=eval(document.getElementById('1').value);
	}
	function del1()
	{
		document.getElementById('1').value=document.getElementById('1').value.substring(0,document.getElementById('1').value.length-1);
	}
	function del2()
	{
		document.getElementById('1').value='';
	}
	function sqrt1()
	{
		document.getElementById('1').value=Math.sqrt(document.getElementById('1').value);
	}
	function Pow()
	{
		document.getElementById('1').value=Math.pow(document.getElementById('1').value,2);
	}
</script>
</head>

<body bgcolor="#ff7575">
<center>
<h1>计算器</h1>
</center>
<div>
	<table>
		<tr>
		<td colspan="4"><input type="text" class="input1" id="1" value="0" name="text1"/></td>
		</tr>
		
		<tr>
			<td><input type="button" id="2" value="+" onclick="buttontext('2')"/></td>
			<td><input type="button" id="3" value="1" onclick="buttontext('3')"/></td>
			<td><input type="button" id="4" value="2" onclick="buttontext('4')"/></td>
			<td><input type="button" id="5" value="3" onclick="buttontext('5')"/></td>
		</tr>
		
		
		<tr>
			<td><input type="button" id="6" value="-" onclick="buttontext('6')"/></td>
			<td><input type="button" id="7" value="4" onclick="buttontext('7')"/></td>
			<td><input type="button" id="8" value="5" onclick="buttontext('8')"/></td>
			<td><input type="button" id="9" value="6" onclick="buttontext('9')"/></td>
		</tr>
		
		<tr>
			<td><input type="button" id="10" value="*" onclick="buttontext('10')"/></td>
			<td><input type="button" id="11" value="7" onclick="buttontext('11')"/></td>
			<td><input type="button" id="12" value="8" onclick="buttontext('12')"/></td>
			<td><input type="button" id="13" value="9" onclick="buttontext('13')"/></td>
		</tr>
		
		
		<tr>
			<td><input type="button" id="14" value="/" onclick="buttontext('14')"/></td>
			<td><input type="button" id="15" value="0" onclick="buttontext('15')"/></td>
			<td><input type="button" id="16" value="." onclick="buttontext('16')"/></td>
			<td><input type="button" id="17" value="=" onclick="compute()"/></td>
		</tr>
		
		
		<tr>
			<td><input type="button" id="18" value="√" onclick="sqrt1()"/></td>
			<td><input type="button" id="19" value="平方根" onclick="Pow()"/></td>
			<td><input type="button" id="20" value="C" onclick="del2()"/></td>
			<td><input type="button" id="21" value="←" onclick="del1()"/></td>
		</tr>
		
	</table>
</div>
</body>
</html>

　　

posted on 2017-03-05 16:45  栀蓝  阅读(589)  评论(0)    收藏  举报

levels of contents