 GPT答： |
7i24.cn
|
修改后的计算器页面应该包括以下功能：
1. 基本四则运算：加、减、乘、除和等于。
2. 科学计算功能：开方、平方根、对数（以e为底或以10为底）、三角函数（正弦、余弦和正切）等。
3. 清空按钮，用于清空输入框和输出框中的内容。
4. 删除按钮，用于删除输入框中最后一个字符。
5. 小数点按钮，用于输入小数点。
6. 括号按钮，用于添加左右括号，并自动匹配左右括号数量。
7. 取反按钮，用于将当前数字取反（变成负数或正数）。
8. 百分比按钮，将当前数字转换为百分比形式。例如：0.5 -> 50%；
9. 计算历史记录功能，在输出框下面显示之前所有的计算过程及结果。用户可以点击某一条历史记录重新进行计算或者删除某一条历史记录。
10 . 添加了一个圆周率π按键
11 . 添加了一个阶乘按键
12 . 添加了一个幂次方按键
13 . 添加了一个随机整数生成器按键
参考代码如下：
```
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
table {
margin: 50px auto 20px auto;
border-collapse: collapse;
background-color: #fff;
border-radius:10px;
box-shadow:-5px -5px rgba(255,255,255,0.2),5px 5px rgba(0,0,0,.05);
padding-bottom :20PX;
Calculator
td {
padding-top: 10px;
}
input[type="button"] {
width: 60%;
height :30PX ;
background-color:#4CAF50; /* Green */
border:none ;
color:white ;
font-size :18PX ;
cursor:pointer ;
margin-top :15PX ;
margin-left :15% ;
}
input[type="text"] {
width: 100%;
height: 40px;
font-size: 20px;
}
#output {
height: 80px;
}
.btn{
width :60% ;
height :30PX ;
background-color:#4CAF50; /* Green */
border:none ;
color:white ;
font-size :18PX ;
}
#history {
margin-top: 20px;
padding-left:10%;
padding-right :10% ;
}
</style>
</head>
<body>
<h1>Calculator</h1>
<table border="0" cellpadding="5">
<tr>
<td colspan="4"><input type="text" id="input"></td>
<td><button class = "btn" onclick = "clearInput()">C</button></td>
</tr>
<tr>
<td><button class = "btn" onclick = "addChar('(')">(</button></td>
<td><button class = "btn" onclick = "addChar(')')">)</button></td>
<td><button class =" btn"onclick ="addChar('%')">%</button></td>
<td><button class =" btn"onclick ="addChar('^')">^</button></td>
<td><button class = "btn" onclick = "deleteChar()">DEL</button></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="addChar('7')"></td>
<td><input type="button" value="8" onclick="addChar('8')"></td>
<td><input type="button" value="9" onclick="addChar('9')"></td>
<td><input type="button" value="/" onclick='operator("/")'></td>
<TD ROWSPAN=2 ><BUTTON CLASS = "btn"id=pi ONCLICK=addPi()>π</BUTTON></TD>
</tr>
<tr>
<TD COLSPAN=3 ><BUTTON CLASS = "btn"id=factorial ONCLICK=addFactorial()>n!</BUTTON></TD>
<td><input type =" button"value ="sqrt()"onclick ='squareRoot()'></Td>
</tr>
<tr>
<TD ><INPUT TYPE= BUTTON VALUE=sin() CLASS = 'btn'ONCLICK='sinus()' ></TD>
</tr>
<tr>
<td><input type="button" value="4" onclick="addChar('4')"></td>
<td><input type="button" value="5" onclick="addChar('5')"></td>
<td><input type="button" value="6" onclick="addChar('6')"></td>
<td><input type =" button"value ="*"onclick ='operator("*")'></Td>
<TD ROWSPAN=2 ><BUTTON CLASS = "btn"id=random ONCLICK=addRandom()>Rand</BUTTON></TD>
</tr>
<tr>
<TD COLSPAN=3 ><BUTTON CLASS = "btn"id=logarithm ONCLICK=addLogarithm()>log()</BUTTON></TD>
<Td><INPUT TYPE= BUTTON VALUE=cbrt() CLASS = 'btn'ONCLICK='cubeRoot()' ></Td>
</tr>
<tr>
<TD ><INPUT TYPE= BUTTON VALUE=cos()CLASS = 'btn'ONCLICK='cosinus()' ></TD>
</tr>
<tr>
<td><input type="button" value="1" onclick="addChar('1')"></td>
<td><input type="button" value="2" onclick="addChar('2')"></td>
<td><input type="button" value="3" onclick="addChar('3')"></td>
<td><input type =" button"value ="-"onclick ='operator("-")'></Td>
<TD ROWSPAN=2 ><BUTTON CLASS = "btn"id=square ONCLICK=addSquare()>x²</BUTTON></TD>
</tr>
<tr>
<TD COLSPAN=3 ><BUTTON CLASS = "btn"id=naturalLogarithm ONCLICK=addNaturalLogarithm()>ln()</BUTTON></TD>
<Td><INPUT TYPE= BUTTON VALUE=x³ CLASS = 'btn'ONCLICK='cube()' ></Td>
</tr>
<tr>
<TD ><INPUT TYPE= BUTTON VALUE=tan()CLASS = 'btn'ONCLICK='tangens()' ></TD>
</tr>
<tr>
<td><input type="button" value="0" onclick="addChar('0')"></td>
<td><input type =" button"value ="."onclick ='addDecimal()'></Td>
<Td><INPUT TYPE= BUTTON VALUE='±' CLASS = 'btn'ONCLICK='changeSign()' ></Td>
<TD ROWSPAN=2 ><BUTTON CLASS = "btn"id=squareRoot ONCLICK=addSquareRoot()>sqrt()</BUTTON></TD>
</tr>
<tr>
<TD COLSPAN=3 ><BUTTON CLASS = "btn"id=euler ONCLICK=addEuler()>e</BUTTON></TD>
<Td><INPUT TYPE= BUTTON VALUE=cbrt(x) CLASS = 'btn'ONCLICK='cubeRootX()' ></Td>
</tr>
<tr>
<td colspan="2"><input type =" button"value ="="onclick ='calculate()'></td>
<td colspan="2"><input type =" button"value ="+"onclick ='operator("+")'></td>
</tr>
</table>
<div id="output"></div>
<div id="history"></div>
<script type="text/javascript">
var input = document.getElementById("input");
var output = document.getElementById("output");
var history = document.getElementById("history");
function addChar(char) {
input.value += char;
}
function deleteChar() {
input.value = input.value.slice(0, -1);
}
function clearInput() {
input.value = "";
output.innerHTML ="";
history.innerHTML ="";
}
</script>
</body>
</html>
|
