苹果计算器HTML代码
时间: 2023-06-22 15:48:32 浏览: 201
以下是一个简单的苹果计算器的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>苹果计算器</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
text-align: center;
}
.calculator {
margin: 50px auto;
width: 250px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
padding: 20px;
}
.calculator h1 {
font-size: 24px;
margin-bottom: 10px;
}
.calculator input[type="text"] {
width: 100%;
height: 40px;
font-size: 18px;
margin-bottom: 10px;
padding: 5px;
border: none;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
.calculator input[type="button"] {
width: 50px;
height: 50px;
font-size: 20px;
margin: 5px;
border: none;
border-radius: 3px;
cursor: pointer;
background-color: #f2f2f2;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.calculator input[type="button"]:hover {
background-color: #e6e6e6;
}
.calculator input[type="button"].operator {
background-color: #ff9500;
color: #fff;
}
.calculator input[type="button"].operator:hover {
background-color: #ffad33;
}
</style>
</head>
<body>
<div class="calculator">
<h1>简易计算器</h1>
<input type="text" id="txtResult" readonly="readonly">
<input type="button" value="1" onclick="AddDigit(1)">
<input type="button" value="2" onclick="AddDigit(2)">
<input type="button" value="3" onclick="AddDigit(3)">
<input type="button" value="+" onclick="AddOperator('+')" class="operator">
<br>
<input type="button" value="4" onclick="AddDigit(4)">
<input type="button" value="5" onclick="AddDigit(5)">
<input type="button" value="6" onclick="AddDigit(6)">
<input type="button" value="-" onclick="AddOperator('-')" class="operator">
<br>
<input type="button" value="7" onclick="AddDigit(7)">
<input type="button" value="8" onclick="AddDigit(8)">
<input type="button" value="9" onclick="AddDigit(9)">
<input type="button" value="*" onclick="AddOperator('*')" class="operator">
<br>
<input type="button" value="C" onclick="Clear()">
<input type="button" value="0" onclick="AddDigit(0)">
<input type="button" value="/" onclick="AddOperator('/')" class="operator">
<input type="button" value="=" onclick="Calculate()" class="operator">
</div>
<script>
var num1 = '';
var num2 = '';
var operator = '';
var result = '';
function AddDigit(digit) {
if (operator == '') {
num1 += digit;
document.getElementById('txtResult').value = num1;
}
else {
num2 += digit;
document.getElementById('txtResult').value = num2;
}
}
function AddOperator(op) {
if (num1 != '' && operator == '') {
operator = op;
document.getElementById('txtResult').value = operator;
}
}
function Calculate() {
if (num1 != '' && num2 != '' && operator != '') {
var n1 = parseFloat(num1);
var n2 = parseFloat(num2);
if (operator == '+') {
result = n1 + n2;
}
else if (operator == '-') {
result = n1 - n2;
}
else if (operator == '*') {
result = n1 * n2;
}
else if (operator == '/') {
result = n1 / n2;
}
document.getElementById('txtResult').value = result;
num1 = '';
num2 = '';
operator = '';
result = '';
}
}
function Clear() {
num1 = '';
num2 = '';
operator = '';
result = '';
document.getElementById('txtResult').value = '';
}
</script>
</body>
</html>
```
这段代码会生成一个简单的计算器页面,包含数字按钮、运算符按钮和一个显示结果的文本框。用户可以通过点击按钮来输入数字和运算符,然后计算器会根据用户的输入进行计算,并在文本框中显示结果。
阅读全文