diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..35410ca --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# 默认忽略的文件 +/shelf/ +/workspace.xml +# 基于编辑器的 HTTP 客户端请求 +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/Double.iml b/.idea/Double.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/Double.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..0548357 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..ffa1c09 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..00fbe5a --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/Git b/Git new file mode 160000 index 0000000..9aaa521 --- /dev/null +++ b/Git @@ -0,0 +1 @@ +Subproject commit 9aaa5210e3c7bf30e3ddf212aa39ac28a6cbcbc7 diff --git a/final/index.html b/final/index.html new file mode 100644 index 0000000..5abb198 --- /dev/null +++ b/final/index.html @@ -0,0 +1,39 @@ + + + + + + iPhone计算器 + + + +
+
0
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ + + diff --git a/final/script.js b/final/script.js new file mode 100644 index 0000000..464ee03 --- /dev/null +++ b/final/script.js @@ -0,0 +1,88 @@ +let displayValue = '0'; // 显示屏上的内容 +let firstNumber = null; // 第一个数字 +let secondNumber = null; // 第二个数字 +let operation = null; // 运算符 +let waitingForSecondNumber = false; + +// 更新显示 +function updateDisplay() { + const display = document.getElementById('display'); + display.innerText = displayValue; +} + +// 添加数字 +function appendNumber(number) { + if (waitingForSecondNumber) { + displayValue = number.toString(); + waitingForSecondNumber = false; + } else { + displayValue = displayValue === '0' ? number.toString() : displayValue + number.toString(); + } + updateDisplay(); +} + +// 设置运算符 +function setOperation(op) { + if (firstNumber === null) { + firstNumber = parseFloat(displayValue); + } else if (operation) { + secondNumber = parseFloat(displayValue); + firstNumber = performCalculation(firstNumber, secondNumber, operation); + displayValue = firstNumber.toString(); + updateDisplay(); + } + operation = op; + waitingForSecondNumber = true; +} + +// 计算结果 +function calculate() { + if (operation && !waitingForSecondNumber) { + secondNumber = parseFloat(displayValue); + displayValue = performCalculation(firstNumber, secondNumber, operation).toString(); + firstNumber = null; + secondNumber = null; + operation = null; + updateDisplay(); + } +} + +// 执行计算 +function performCalculation(num1, num2, operator) { + switch (operator) { + case '+': + return num1 + num2; + case '-': + return num1 - num2; + case '*': + return num1 * num2; + case '/': + return num2 !== 0 ? num1 / num2 : '错误'; + default: + return num2; + } +} + +// 百分号处理 +function percent() { + displayValue = (parseFloat(displayValue) / 100).toString(); + updateDisplay(); +} + +// 添加小数点 +function appendSymbol(symbol) { + if (!displayValue.includes(symbol)) { + displayValue += symbol; + updateDisplay(); + } +} + +// 清除显示 +function clearDisplay() { + displayValue = '0'; + firstNumber = null; + secondNumber = null; + operation = null; + waitingForSecondNumber = false; + updateDisplay(); +} diff --git a/final/style.css b/final/style.css new file mode 100644 index 0000000..94421cf --- /dev/null +++ b/final/style.css @@ -0,0 +1,69 @@ +body, html { + margin: 0; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #f2f2f2; /* 背景颜色 */ + font-family: 'Arial', sans-serif; +} + +.calculator { + width: 400px; /* 计算器宽度 */ + border-radius: 30px; /* 圆角 */ + overflow: hidden; /* 隐藏超出边界部分 */ + background: #ffffff; /* 背景颜色 */ + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 阴影效果 */ +} + +.display { + background: #000; /* 显示区域颜色 */ + color: #ffffff; /* 字体颜色 */ + font-size: 64px; /* 字体大小 */ + text-align: right; /* 文字右对齐 */ + padding: 20px; /* 内边距 */ + border-bottom: 1px solid #dddddd; /* 下边框 */ + height: 100px; /* 显示区域高度 */ + box-sizing: border-box; /* 包括内边距和边框 */ + overflow: hidden; /* 隐藏超出内容 */ +} + +.buttons { + display: grid; /* 使用网格布局 */ + grid-template-columns: repeat(4, 1fr); /* 四列 */ + gap: 1px; /* 按钮间隔 */ +} + +.button { + height: 80px; /* 按钮高度 */ + border: none; /* 无边框 */ + font-size: 36px; /* 字体大小 */ + color: white; /* 字体颜色 */ + background: #007AFF; /* 按钮颜色 */ + transition: background 0.3s; /* 背景颜色渐变 */ +} + +.button.zero { + grid-column: span 2; /* 0按钮跨两列 */ +} + +.button.function { + background: #8E8E93; /* 功能按钮颜色 */ +} + +.button.operator { + background: #FF3B30; /* 运算符按钮颜色 */ +} + +.button:hover { + cursor: pointer; /* 鼠标样式 */ + background: #0051D4; /* 鼠标悬停效果 */ +} + +.button.operator:hover { + background: #7A7A7A; /* 运算符鼠标悬停效果 */ +} + +.button.function:hover { + background: #7A7A7A; /* 功能按钮鼠标悬停效果 */ +} diff --git a/script.js b/script.js new file mode 100644 index 0000000..464ee03 --- /dev/null +++ b/script.js @@ -0,0 +1,88 @@ +let displayValue = '0'; // 显示屏上的内容 +let firstNumber = null; // 第一个数字 +let secondNumber = null; // 第二个数字 +let operation = null; // 运算符 +let waitingForSecondNumber = false; + +// 更新显示 +function updateDisplay() { + const display = document.getElementById('display'); + display.innerText = displayValue; +} + +// 添加数字 +function appendNumber(number) { + if (waitingForSecondNumber) { + displayValue = number.toString(); + waitingForSecondNumber = false; + } else { + displayValue = displayValue === '0' ? number.toString() : displayValue + number.toString(); + } + updateDisplay(); +} + +// 设置运算符 +function setOperation(op) { + if (firstNumber === null) { + firstNumber = parseFloat(displayValue); + } else if (operation) { + secondNumber = parseFloat(displayValue); + firstNumber = performCalculation(firstNumber, secondNumber, operation); + displayValue = firstNumber.toString(); + updateDisplay(); + } + operation = op; + waitingForSecondNumber = true; +} + +// 计算结果 +function calculate() { + if (operation && !waitingForSecondNumber) { + secondNumber = parseFloat(displayValue); + displayValue = performCalculation(firstNumber, secondNumber, operation).toString(); + firstNumber = null; + secondNumber = null; + operation = null; + updateDisplay(); + } +} + +// 执行计算 +function performCalculation(num1, num2, operator) { + switch (operator) { + case '+': + return num1 + num2; + case '-': + return num1 - num2; + case '*': + return num1 * num2; + case '/': + return num2 !== 0 ? num1 / num2 : '错误'; + default: + return num2; + } +} + +// 百分号处理 +function percent() { + displayValue = (parseFloat(displayValue) / 100).toString(); + updateDisplay(); +} + +// 添加小数点 +function appendSymbol(symbol) { + if (!displayValue.includes(symbol)) { + displayValue += symbol; + updateDisplay(); + } +} + +// 清除显示 +function clearDisplay() { + displayValue = '0'; + firstNumber = null; + secondNumber = null; + operation = null; + waitingForSecondNumber = false; + updateDisplay(); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..94421cf --- /dev/null +++ b/style.css @@ -0,0 +1,69 @@ +body, html { + margin: 0; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #f2f2f2; /* 背景颜色 */ + font-family: 'Arial', sans-serif; +} + +.calculator { + width: 400px; /* 计算器宽度 */ + border-radius: 30px; /* 圆角 */ + overflow: hidden; /* 隐藏超出边界部分 */ + background: #ffffff; /* 背景颜色 */ + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 阴影效果 */ +} + +.display { + background: #000; /* 显示区域颜色 */ + color: #ffffff; /* 字体颜色 */ + font-size: 64px; /* 字体大小 */ + text-align: right; /* 文字右对齐 */ + padding: 20px; /* 内边距 */ + border-bottom: 1px solid #dddddd; /* 下边框 */ + height: 100px; /* 显示区域高度 */ + box-sizing: border-box; /* 包括内边距和边框 */ + overflow: hidden; /* 隐藏超出内容 */ +} + +.buttons { + display: grid; /* 使用网格布局 */ + grid-template-columns: repeat(4, 1fr); /* 四列 */ + gap: 1px; /* 按钮间隔 */ +} + +.button { + height: 80px; /* 按钮高度 */ + border: none; /* 无边框 */ + font-size: 36px; /* 字体大小 */ + color: white; /* 字体颜色 */ + background: #007AFF; /* 按钮颜色 */ + transition: background 0.3s; /* 背景颜色渐变 */ +} + +.button.zero { + grid-column: span 2; /* 0按钮跨两列 */ +} + +.button.function { + background: #8E8E93; /* 功能按钮颜色 */ +} + +.button.operator { + background: #FF3B30; /* 运算符按钮颜色 */ +} + +.button:hover { + cursor: pointer; /* 鼠标样式 */ + background: #0051D4; /* 鼠标悬停效果 */ +} + +.button.operator:hover { + background: #7A7A7A; /* 运算符鼠标悬停效果 */ +} + +.button.function:hover { + background: #7A7A7A; /* 功能按钮鼠标悬停效果 */ +}