Web Calculator
创作时间:
作者:
@小白创作中心
Web Calculator
引用
1
来源
1.
https://docs.pingcode.com/baike/3410134
本文将详细介绍如何使用HTML、CSS和JavaScript创建一个功能齐全的Web计算器。从基础的HTML结构搭建，到CSS样式设计，再到JavaScript功能实现，最后到高级功能的添加和用户体验的优化，手把手教你打造一个专业的Web计算器。
一、使用HTML、CSS和JavaScript
1、HTML的基础结构
HTML（超文本标记语言）是用于创建网页的标准标记语言。首先，我们需要一个基本的HTML框架来放置我们的计算器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<div class="display">
<input type="text" id="result" disabled>
</div>
<div class="buttons">
<!-- Calculator buttons will go here -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
在这个HTML框架中，我们创建了一个计算器的容器，以及一个显示结果的输入框。接下来，我们将添加计算器的按钮。
2、CSS的样式设置
CSS（层叠样式表）用于美化网页。在我们的计算器中，CSS将帮助我们设计一个漂亮且用户友好的界面。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.calculator {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 320px;
}
.display input {
width: 100%;
height: 50px;
text-align: right;
font-size: 24px;
border: none;
margin-bottom: 10px;
padding: 10px;
box-sizing: border-box;
}
.buttons {
display: flex;
flex-wrap: wrap;
}
button {
width: 25%;
height: 60px;
font-size: 20px;
border: 1px solid #ddd;
background-color: #f4f4f4;
cursor: pointer;
}
button:hover {
background-color: #e0e0e0;
}
通过上述CSS代码，我们将计算器的外观进行了美化，使其看起来更加现代和简洁。
3、JavaScript的功能实现
JavaScript是用于创建动态和交互式网页的编程语言。我们将使用JavaScript来实现计算器的核心功能。
document.addEventListener('DOMContentLoaded', function () {
let buttons = document.querySelectorAll('button');
let display = document.getElementById('result');
let currentInput = '';
buttons.forEach(button => {
button.addEventListener('click', function () {
let value = this.innerText;
if (value === 'C') {
currentInput = '';
display.value = '';
} else if (value === '=') {
try {
display.value = eval(currentInput);
} catch {
display.value = 'Error';
}
} else {
currentInput += value;
display.value = currentInput;
}
});
});
});
在这段JavaScript代码中，我们首先选取了所有的按钮，并为每个按钮添加了点击事件处理函数。根据按钮的值，我们执行不同的操作，如清除输入、显示结果或者将按钮的值追加到当前输入中。
二、设计用户友好的界面
1、按钮布局的优化
为了使用户体验更好，我们需要对按钮的布局进行优化。确保每个按钮的大小和位置都是一致的，并且用户可以轻松地点击每个按钮。
<div class="buttons">
<button>7</button>
<button>8</button>
<button>9</button>
<button>/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>*</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>-</button>
<button>0</button>
<button>.</button>
<button>=</button>
<button>+</button>
<button>C</button>
</div>
2、响应式设计
确保计算器在不同设备和屏幕尺寸上都能良好显示。可以使用媒体查询来实现响应式设计。
@media (max-width: 600px) {
.calculator {
width: 100%;
padding: 10px;
}
button {
width: 20%;
height: 50px;
font-size: 18px;
}
}
三、实现基本计算功能
1、加减乘除
计算器的基本功能包括加、减、乘、除。我们已经在JavaScript代码中使用了eval函数来实现这些基本操作。但是，为了更安全和可靠，建议使用自定义的计算函数来替代eval。
function calculate(expression) {
try {
return new Function('return ' + expression)();
} catch {
return 'Error';
}
}
button.addEventListener('click', function () {
let value = this.innerText;
if (value === 'C') {
currentInput = '';
display.value = '';
} else if (value === '=') {
display.value = calculate(currentInput);
} else {
currentInput += value;
display.value = currentInput;
}
});
2、处理小数点和负数
确保计算器能够正确处理小数点和负数。可以在JavaScript代码中添加相应的逻辑。
if (value === '.') {
if (!currentInput.includes('.')) {
currentInput += value;
display.value = currentInput;
}
} else if (value === '-') {
if (currentInput === '' || currentInput.endsWith('/')) {
currentInput += value;
display.value = currentInput;
}
}
四、添加高级功能
1、添加平方根和幂运算
通过添加按钮和相应的JavaScript逻辑，我们可以扩展计算器的功能，支持平方根和幂运算。
<button>√</button>
<button>^</button>
if (value === '√') {
currentInput = Math.sqrt(parseFloat(currentInput)).toString();
display.value = currentInput;
} else if (value === '^') {
currentInput += '';
display.value = currentInput;
}
2、添加内存功能
内存功能是高级计算器的一项重要功能。我们可以添加M+、M-、MR（Memory Recall）等按钮，并在JavaScript代码中实现这些功能。
<button>M+</button>
<button>M-</button>
<button>MR</button>
let memory = 0;
if (value === 'M+') {
memory += parseFloat(currentInput);
} else if (value === 'M-') {
memory -= parseFloat(currentInput);
} else if (value === 'MR') {
currentInput = memory.toString();
display.value = currentInput;
}
五、优化用户体验
1、键盘输入支持
为计算器添加键盘输入支持，使用户可以通过键盘进行操作。
document.addEventListener('keydown', function (event) {
let key = event.key;
if (!isNaN(key) || ['+', '-', '*', '/', '.'].includes(key)) {
currentInput += key;
display.value = currentInput;
} else if (key === 'Enter') {
display.value = calculate(currentInput);
} else if (key === 'Backspace') {
currentInput = currentInput.slice(0, -1);
display.value = currentInput;
}
});
2、错误处理和用户提示
在计算过程中，可能会出现错误。例如，除以零或输入无效的表达式。我们需要处理这些错误并给用户提示。
function calculate(expression) {
try {
let result = new Function('return ' + expression)();
if (!isFinite(result)) throw 'Error';
return result;
} catch {
return 'Error';
}
}
3、优化按钮的交互效果
为了提升用户体验，可以为按钮添加一些交互效果，比如按下时的阴影效果。
button:active {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
通过以上步骤，我们已经成功创建了一个功能齐全的Web计算器，并且通过优化界面设计和添加高级功能，使其更加用户友好和实用。希望这篇文章能够帮助你理解如何使用HTML、CSS和JavaScript来创建一个专业的Web计算器。
热门推荐
人民解放军是谁提出的？罗荣桓首倡八路军改为解放军，47年才实行
辅警选择攻略：4大“香饽饽”岗位大揭秘
为来访者或同事指示方向时，有哪些恰当的肢体语言和语言表达
在选择床时，需要考虑许多因素
《惜花芷》：剧中人物，各有千秋
那个做烟花和火药的蔡国强，也开始搞AI了
深宫曲刷皇上好感度方法介绍
一文带你搞懂单模光纤和多模光纤的区别
Excel中计算R平方值的三种方法及应用场景
人体十二募穴
从“两弹一星”到“嫦娥工程” 哈工大与国家航天事业共成长
普洱茶与结石：饮用建议及对健康的影响分析
日本GDP超预期推动日元走强，美元受美国经济数据疲软影响承压
服务器硬盘格式化全攻略：详细步骤与注意事项！
中医治疗股骨头坏死：不同阶段的针对性疗法
图文并茂 | 通过写字和画图，轻松鉴别各种震颤
黄河远上白云间是哪首古诗
现代化美好安徽建设的水利担当
虎皮鸡爪的烹饪技巧及营养价值探讨
律师资格证考试的模拟试题在哪里找
多所高校取消硕士研究生新生奖学金：挑战与机遇并存
数据资产入表之数据资产评估方法解析
崩坏星穹铁道3.0下半星琼获取攻略详解
成都藏民为何如此之多？从历史到现代的全面解析
智慧交通大数据界面，在提升出行效率方面当居首功
如何使用QC七大手法中的直方图和管制图来分析和控制产品质量？
香港银行存现金的规定是什么
方柱扣的安装过程是怎样的？需要特殊的工具或技能吗？
吸入甲醛会导致身体出现哪些状况
从成本到利润：外贸企业的管理转型