javascript简易计算器

暗隐之光

已于 2023-10-02 10:43:52 修改

阅读量4.8k

点赞数 6

分类专栏： Javascript 文章标签： node.js

于 2023-09-18 09:54:05 首次发布

本文链接：https://blog.youkuaiyun.com/a17783481239/article/details/132964512

版权

Javascript 专栏收录该内容

2 篇文章

订阅专栏

一.计算器界面图

二.计算器功能

该计算器是一个简易的计算器，可以进行基本的数学运算，包括加、减、乘、除、括号和小数运算。具体实现如下：

用户可以在输入框中输入数字、运算符和括号，使用按钮输入或者键盘输入均可。
用户可以使用计算功能，将输入框中的表达式计算出结果，并将结果显示在输入框中。
计算结果将被添加到历史记录中，用户可以查看历史记录并删除不需要的记录。
用户可以清除输入框中的内容或删除最后一个字符。
用户可以在键盘上按下回车键进行计算。

三.代码实现

3.1HTML部分代码

<!DOCTYPE html>
<html>

<head>
<title>简易计算器</title>
</head>

<body>

<div class="calculator">
<h1>简易计算器</h1>

<div class="input-field">
<input type="text" id="expression" readonly>
<button class="delete-button" οnclick="deleteLastCharacter()">⌫</button>
</div>


<div class="button-container">
<button οnclick="addCharacter('7')">7</button>
<button οnclick="addCharacter('8')">8</button>
<button οnclick="addCharacter('9')">9</button>
<button οnclick="addCharacter('/')">/</button>
<button οnclick="addCharacter('4')">4</button>
<button οnclick="addCharacter('5')">5</button>
<button οnclick="addCharacter('6')">6</button>
<button οnclick="addCharacter('*')">*</button>
<button οnclick="addCharacter('1')">1</button>
<button οnclick="addCharacter('2')">2</button>
<button οnclick="addCharacter('3')">3</button>
<button οnclick="addCharacter('-')">-</button>
<button οnclick="addCharacter('0')">0</button>
<button οnclick="addCharacter('.')">.</button>
<button οnclick="calculate()">=</button>
<button οnclick="addCharacter('+')">+</button>
</div>


<button class="clear-button" οnclick="clearExpression()">清空</button>


<div class="history-field">
<h2>历史记录</h2>
<div id="history-container" class="history-container"></div>

<button class="toggle-history-button" οnclick="toggleHistory()">展开/收起历史记录</button>
</div>
</div>
</body>

</html>

3.2css部分代码

/* 整体样式 */

body {

background-color: #f9f9f9;

font-family: Arial, sans-serif;

}

.calculator {

width: 300px;

margin: 0 auto;

background-color: #ffffff;

border-radius: 5px;

padding: 20px;

box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);

}

h1 {

color: #333333;

text-align: center;

margin-bottom: 20px;

}

/* 输入框样式 */

.input-field {

display: flex;

align-items: center;

justify-content: space-between;

margin-bottom: 20px;

padding: 10px;

background-color: #f2f2f2;

border: 1px solid #dddddd;

border-radius: 5px;

font-size: 18px;

}

.input-field input {

flex-grow: 1;

border: none;

background-color: transparent;

font-size: 18px;

outline: none;

}

/* 按钮样式 */

.button-container {

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-gap: 10px;

margin-bottom: 20px;

}

.button-container button {

background-color: #4CAF50;

color: white;

border: none;

border-radius: 5px;

padding: 15px;

font-size: 16px;

cursor: pointer;

transition: background-color 0.2s;

width: 100%;

}

.button-container button:hover {

background-color: #45a049;

}

/* 结果按钮样式 */

.result-button {

grid-column: span 2;

}

/* 清除按钮样式 */

.clear-button {

grid-column: span 2;

background-color: #ff9800;

}

/* 删除按钮样式 */

.delete-button {

background-color: #ff0000;

color: white;

border: none;

border-radius: 5px;

padding: 15px;

font-size: 16px;

cursor: pointer;

transition: background-color 0.2s;

}

.delete-button:hover {

background-color: #cc0000;

}

/* 历史记录样式 */

.history-field {

margin-top: 20px;

}

.history-field h2 {

color: #333333;

margin-bottom: 10px;

text-align: center;

}

.history-container {

max-height: 200px;

padding-right: 5px;

background-color: #f2f2f2;

border: 1px solid #cccccc;

border-radius: 5px;

overflow-y: auto;

margin-bottom: 10px;

}

.history-entry {

display: flex;

justify-content: space-between;

align-items: center;

padding: 10px;

color: #666666;

border-bottom: 1px solid #cccccc;

cursor: pointer;

}

.entry-expression {

font-weight: bold;

}

.entry-result {

margin-left: 10px;

font-style: italic;

}

/* 删除历史记录按钮样式 */

.delete-history-button {

background-color: #ff0000;

color: white;

border: none;

border-radius: 5px;

padding: 5px;

font-size: 14px;

cursor: pointer;

transition: background-color 0.2s;

}

.delete-history-button:hover {

background-color: #cc0000;

}

/* 切换历史记录按钮样式 */

.toggle-history-button {

text-align: center;

color: #666666;

cursor: pointer;

margin-top: 10px;

transition: color 0.2s;

}

.toggle-history-button:hover {

color: #333333;

}

/* 响应式样式 */

@media (max-width: 400px) {

.calculator {

width: 100%;

padding: 10px;

}

.button-container button {

padding: 12px;

font-size: 14px;

}

.history-entry {

padding: 5px;

}

.delete-history-button {

padding: 3px;

font-size: 12px;

}

}

.hidden {

display: none;

}

3.3js部分代码

let expressionInput = document.getElementById('expression'); // 获取表达式输入框元素
let historyContainer = document.getElementById('history-container'); // 获取历史记录容器元素
let history = []; // 存储历史记录条目的数组

function addCharacter(character) {
  // 添加字符到表达式输入框
  expressionInput.value += character;
}

function deleteLastCharacter() {
  // 删除最后一个字符
  let expression = expressionInput.value;
  expressionInput.value = expression.substring(0, expression.length - 1);
}

function calculate() {
  // 计算表达式的结果
  let expression = expressionInput.value;
  if (!expression) return;

  try {
    let result = eval(expression); // 使用eval函数计算表达式结果（潜在安全风险，请慎用）
    expressionInput.value = result;
    addToHistory(expression, result); // 将表达式和结果添加到历史记录中
  } catch (error) {
    console.log(error);
    alert('无效的表达式');
  }
}

function clearExpression() {
  // 清空表达式输入框
  expressionInput.value = '';
}

function addToHistory(expression, result) {
  // 添加表达式和结果到历史记录
  let entry = document.createElement('div'); // 创建一个div元素，表示历史记录的条目
  entry.className = 'history-entry'; // 设置条目的类名为history-entry

  let expressionField = document.createElement('span'); // 创建一个span元素，表示表达式字段
  expressionField.className = 'entry-expression'; // 设置表达式字段的类名为entry-expression
  expressionField.textContent = expression; // 设置表达式字段的文本内容为表达式

  let resultField = document.createElement('span'); // 创建一个span元素，表示结果字段
  resultField.className = 'entry-result'; // 设置结果字段的类名为entry-result
  resultField.textContent = result; // 设置结果字段的文本内容为结果

  let deleteButton = document.createElement('button'); // 创建一个按钮元素，表示删除按钮
  deleteButton.className = 'delete-history-button'; // 设置删除按钮的类名为delete-history-button
  deleteButton.textContent = '删除'; // 设置删除按钮的文本内容为"删除"
  deleteButton.onclick = function () {
    // 添加点击事件处理程序，点击时删除条目并从历史记录中移除
    entry.remove();
    removeFromHistory(entry);
  };

  entry.appendChild(expressionField); // 将表达式字段添加到条目中
  entry.appendChild(resultField); // 将结果字段添加到条目中
  entry.appendChild(deleteButton); // 将删除按钮添加到条目中
  historyContainer.appendChild(entry); // 将条目添加到历史记录容器中

  history.push(entry); // 将条目添加到历史记录数组中
}

function removeFromHistory(entry) {
  // 从历史记录中移除特定的条目
  let index = history.indexOf(entry);
  if (index > -1) {
    history.splice(index, 1);
  }
}

function toggleHistory() {
  // 切换历史记录的显示和隐藏
  historyContainer.classList.toggle('hidden');
}