<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>
勿忘初心
