|
|
8楼 铁血丹心说：
复古手机计算器设计方案
根据您的需求，我设计了一款模仿老式手机造型的计算器，采用方阵排列按键，支持加减乘除和开平方功能，专为手机浏览器优化。设计风格参考了经典的诺基亚手机，带有怀旧感的同时保持现代UI设计标准。
下面是完整的实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>复古手机计算器</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义主题 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1a5fb4',
secondary: '#f0f0f0',
accent: '#ff9500',
dark: '#1c1c1e',
light: '#f5f5f7'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.phone-shadow {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
inset 0 0 20px rgba(0, 0, 0, 0.1);
}
.button-press {
transform: scale(0.95);
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}
.screen-glow {
box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.1);
}
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4 font-sans">
<!-- 手机计算器主体 -->
<div id="calculator" class="w-[280px] bg-dark rounded-[28px] phone-shadow overflow-hidden transition-all duration-300">
<!-- 听筒 -->
<div class="h-8 flex items-center justify-center">
<div class="w-20 h-3 bg-gray-700 rounded-full"></div>
</div>
<!-- 显示屏区域 -->
<div class="bg-black rounded-xl m-4 p-4 screen-glow">
<div id="display" class="text-right text-white min-h-[100px] flex flex-col justify-end">
<div id="expression" class="text-gray-400 text-sm mb-1"></div>
<div id="result" class="text-3xl font-light"></div>
</div>
</div>
<!-- 按键区域 -->
<div class="p-4 pb-8">
<!-- 功能键行 -->
<div class="grid grid-cols-4 gap-3 mb-2">
<button class="func-btn bg-gray-600 text-white rounded-full h-14 flex items-center justify-center text-lg transition-all duration-100">
<<i class="fa fa-cog"></</i>
</button>
<button class="func-btn bg-gray-600 text-white rounded-full h-14 flex items-center justify-center text-lg transition-all duration-100">
<<i class="fa fa-arrow-left"></</i>
</button>
<button id="clear" class="func-btn bg-red-600 text-white rounded-full h-14 flex items-center justify-center text-lg transition-all duration-100">
C
</button>
<button data-op="÷" class="op-btn bg-accent text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
÷
</button>
</div>
<!-- 数字键区域 -->
<div class="grid grid-cols-3 gap-3">
<!-- 第一行数字键 -->
<button data-num="7" class="num-btn bg-gray-800 text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
7
</button>
<button data-num="8" class="num-btn bg-gray-800 text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
8
</button>
<button data-num="9" class="num-btn bg-gray-800 text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
9
</button>
<!-- 第二行数字键 -->
<button data-num="4" class="num-btn bg-gray-800 text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
4
</button>
<button data-num="5" class="num-btn bg-gray-800 text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
5
</button>
<button data-num="6" class="num-btn bg-gray-800 text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
6
</button>
<!-- 第三行数字键 -->
<button data-num="1" class="num-btn bg-gray-800 text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
1
</button>
<button data-num="2" class="num-btn bg-gray-800 text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
2
</button>
<button data-num="3" class="num-btn bg-gray-800 text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
3
</button>
<!-- 第四行数字键 -->
<button id="sqrt" class="op-btn bg-accent text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
√
</button>
<button data-num="0" class="num-btn bg-gray-800 text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
0
</button>
<button id="dot" class="num-btn bg-gray-800 text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
.
</button>
</div>
<!-- 右侧操作键 -->
<div class="grid grid-cols-1 gap-3 ml-auto mt-[-126px] w-[60px]">
<button data-op="×" class="op-btn bg-accent text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
×
</button>
<button data-op="-" class="op-btn bg-accent text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
-
</button>
<button data-op="+" class="op-btn bg-accent text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
+
</button>
<button id="equals" class="op-btn bg-accent text-white rounded-full h-14 flex items-center justify-center text-xl transition-all duration-100">
=
</button>
</div>
</div>
</div>
<script>
// 计算器逻辑
document.addEventListener('DOMContentLoaded', () => {
// 获取DOM元素
const displayResult = document.getElementById('result');
const displayExpression = document.getElementById('expression');
const numButtons = document.querySelectorAll('[data-num]');
const opButtons = document.querySelectorAll('[data-op]');
const equalsButton = document.getElementById('equals');
const clearButton = document.getElementById('clear');
const sqrtButton = document.getElementById('sqrt');
const dotButton = document.getElementById('dot');
const backspaceButton = document.querySelector('.fa-arrow-left').parentElement;
// 计算器状态
let currentValue = '0';
let previousValue = null;
let operator = null;
let resetOnNextInput = false;
// 更新显示
function updateDisplay() {
// 处理数字格式化，避免过长
if (currentValue.length > 10) {
const num = parseFloat(currentValue);
if (!isNaN(num)) {
displayResult.textContent = num.toExponential(4);
} else {
displayResult.textContent = currentValue.substring(0, 10);
}
} else {
displayResult.textContent = currentValue;
}
// 更新表达式显示
if (previousValue && operator) {
displayExpression.textContent = `${previousValue} ${operator}`;
} else {
displayExpression.textContent = '';
}
}
// 初始化显示
updateDisplay();
// 数字按钮点击事件
numButtons.forEach(button => {
button.addEventListener('click', () => {
const num = button.getAttribute('data-num');
// 添加按键反馈
button.classList.add('button-press');
setTimeout(() => button.classList.remove('button-press'), 150);
if (resetOnNextInput) {
currentValue = num;
resetOnNextInput = false;
} else {
currentValue = currentValue === '0' ? num : currentValue + num;
}
updateDisplay();
});
});
// 操作符按钮点击事件
opButtons.forEach(button => {
button.addEventListener('click', () => {
const op = button.getAttribute('data-op');
// 添加按键反馈
button.classList.add('button-press');
setTimeout(() => button.classList.remove('button-press'), 150);
// 如果已经有一个操作符，先计算结果
if (previousValue && operator && !resetOnNextInput) {
calculateResult();
}
previousValue = currentValue;
operator = op;
resetOnNextInput = true;
updateDisplay();
});
});
// 等号按钮点击事件
equalsButton.addEventListener('click', () => {
// 添加按键反馈
equalsButton.classList.add('button-press');
setTimeout(() => equalsButton.classList.remove('button-press'), 150);
if (previousValue && operator) {
calculateResult();
previousValue = null;
operator = null;
resetOnNextInput = true;
}
});
// 清除按钮点击事件
clearButton.addEventListener('click', () => {
// 添加按键反馈
clearButton.classList.add('button-press');
setTimeout(() => clearButton.classList.remove('button-press'), 150);
currentValue = '0';
previousValue = null;
operator = null;
resetOnNextInput = false;
updateDisplay();
});
// 退格按钮点击事件
backspaceButton.addEventListener('click', () => {
// 添加按键反馈
backspaceButton.classList.add('button-press');
setTimeout(() => backspaceButton.classList.remove('button-press'), 150);
if (currentValue.length > 1) {
currentValue = currentValue.slice(0, -1);
} else {
currentValue = '0';
}
updateDisplay();
});
// 小数点按钮点击事件
dotButton.addEventListener('click', () => {
// 添加按键反馈
dotButton.classList.add('button-press');
setTimeout(() => dotButton.classList.remove('button-press'), 150);
if (resetOnNextInput) {
currentValue = '0.';
resetOnNextInput = false;
} else if (!currentValue.includes('.')) {
currentValue += '.';
}
updateDisplay();
});
// 开平方按钮点击事件
sqrtButton.addEventListener('click', () => {
// 添加按键反馈
sqrtButton.classList.add('button-press');
setTimeout(() => sqrtButton.classList.remove('button-press'), 150);
const num = parseFloat(currentValue);
if (num >= 0) {
currentValue = Math.sqrt(num).toString();
resetOnNextInput = true;
updateDisplay();
} else {
currentValue = '错误';
setTimeout(() => {
currentValue = '0';
updateDisplay();
}, 1000);
}
updateDisplay();
});
// 计算结果
function calculateResult() {
const prev = parseFloat(previousValue);
const curr = parseFloat(currentValue);
let result;
switch(operator) {
case '+':
result = prev + curr;
break;
case '-':
result = prev - curr;
break;
case '×':
result = prev * curr;
break;
case '÷':
if (curr === 0) {
currentValue = '错误';
updateDisplay();
return;
}
result = prev / curr;
break;
default:
return;
}
// 处理小数精度问题
result = Number.isInteger(result) ? result.toString() : result.toFixed(6).replace(/0+$/, '').replace(/\.$/, '');
currentValue = result;
updateDisplay();
}
// 添加键盘支持
document.addEventListener('keydown', (e) => {
// 数字键
if (/[0-9]/.test(e.key)) {
e.preventDefault();
const num = e.key;
if (resetOnNextInput) {
currentValue = num;
resetOnNextInput = false;
} else {
currentValue = currentValue === '0' ? num : currentValue + num;
}
updateDisplay();
}
// 操作符
if (['+', '-', '*', '/'].includes(e.key)) {
e.preventDefault();
const op = e.key === '*' ? '×' : e.key === '/' ? '÷' : e.key;
if (previousValue && operator && !resetOnNextInput) {
calculateResult();
}
previousValue = currentValue;
operator = op;
resetOnNextInput = true;
updateDisplay();
}
// 等号或回车
if (e.key === '=' || e.key === 'Enter') {
e.preventDefault();
if (previousValue && operator) {
calculateResult();
previousValue = null;
operator = null;
resetOnNextInput = true;
}
}
// 小数点
if (e.key === '.') {
e.preventDefault();
if (resetOnNextInput) {
currentValue = '0.';
resetOnNextInput = false;
} else if (!currentValue.includes('.')) {
currentValue += '.';
}
updateDisplay();
}
// 退格
if (e.key === 'Backspace') {
e.preventDefault();
if (currentValue.length > 1) {
currentValue = currentValue.slice(0, -1);
} else {
currentValue = '0';
}
updateDisplay();
}
// 清除 (Escape键)
if (e.key === 'Escape') {
e.preventDefault();
currentValue = '0';
previousValue = null;
operator = null;
resetOnNextInput = false;
updateDisplay();
}
// 开平方 (sqrt键或s键)
if (e.key === 's' || e.key === 'S') {
e.preventDefault();
const num = parseFloat(currentValue);
if (num >= 0) {
currentValue = Math.sqrt(num).toString();
resetOnNextInput = true;
} else {
currentValue = '错误';
setTimeout(() => {
currentValue = '0';
updateDisplay();
}, 1000);
}
updateDisplay();
}
});
});
</script>
</body>
</html>
?
设计特点与功能说明
1.?复古手机造型：采用老式诺基亚手机的经典设计，包括弧形边角、实体按键布局和顶部听筒设计，唤起怀旧感。
2.?方阵按键布局：数字键采用3×4网格排列，操作键位于右侧，符合传统手机计算器的使用习惯。
3.?**完整
本帖来自微秘安卓版 |
|
发表于 2025-7-14 08:22:22
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
楼主
{(i + base) % 8 + 1}宫`).join("，");
