js语言编写计算器的历史记录功能，不要弹窗式

你可以使用 HTML、CSS 和 JavaScript 来编写一个简单的计算器，并添加历史记录功能。下面是一个示例代码，你可以根据自己的需要进行修改和适配：

HTML 代码：

<div class="calculator">
  <input type="text" id="input" placeholder="0">
  <div class="buttons">
    <button onclick="append('7')">7</button>
    <button onclick="append('8')">8</button>
    <button onclick="append('9')">9</button>
    <button onclick="append('/')">÷</button>
    <button onclick="append('4')">4</button>
    <button onclick="append('5')">5</button>
    <button onclick="append('6')">6</button>
    <button onclick="append('*')">x</button>
    <button onclick="append('1')">1</button>
    <button onclick="append('2')">2</button>
    <button onclick="append('3')">3</button>
    <button onclick="append('-')">-</button>
    <button onclick="append('0')">0</button>
    <button onclick="append('.')">.</button>
    <button onclick="calculate()">=</button>
    <button onclick="append('+')">+</button>
    <button onclick="clearInput()">C</button>
  </div>
  <div class="history">
    <h2>History</h2>
    <ul id="history-list"></ul>
  </div>
</div>

CSS 代码：

.calculator {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

input[type="text"] {
  width: 100%;
  font-size: 30px;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  width: 50px;
  height: 50px;
  font-size: 20px;
  margin: 5px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px #ccc;
}

button:hover {
  background-color: #f2f2f2;
}

.history {
  margin-top: 20px;
  text-align: left;
}

.history h2 {
  margin-bottom: 10px;
}

.history ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history li {
  font-size: 16px;
  margin-bottom: 5px;
}

JavaScript 代码：

// 获取 DOM 元素
var input = document.getElementById('input');
var historyList = document.getElementById('history-list');

// 定义变量
var expression = '';
var result = '';

// 添加输入
function append(value) {
  expression += value;
  input.value = expression;
}

// 计算结果
function calculate() {
  result = eval(expression);
  input.value = result;
  saveHistory(expression + '=' + result);
  expression = '';
}

// 保存历史记录
function saveHistory(history) {
  var li = document.createElement('li');
  li.innerText = history;
  historyList.appendChild(li);
}

// 清空输入
function clearInput() {
  expression = '';
  result = '';
  input.value = '';
}

在这个例子中，我们使用了 `eval()` 函数来计算表达式的结果。当用户点击等号时，我们将表达式和结果拼接成一个字符串，并将其保存到历史记录中。我们使用 `createElement()` 函数来创建一个新的 `li` 元素，并将历史记录添加到 `li` 元素的文本中，最后将 `li` 元素添加到历史记录列表中。

你可以在此基础上进行修改和扩展，以满足自己的需求。