看看DeepSeek写的计算器

最新推荐文章于 2025-03-15 13:56:56 发布

木木与代码(接项目)

最新推荐文章于 2025-03-15 13:56:56 发布

阅读量337

点赞数 10

分类专栏： Trae 文章标签： DeepSeek Trae JavaScript 计算器

本文链接：https://blog.youkuaiyun.com/m0_46426465/article/details/146081766

版权

Trae 专栏收录该内容

3 篇文章

订阅专栏

公众号：木木与代码
本文作者：@MuMu
编写日期：2025年03月07日
本文字数：3520个字符
关注可了解更多的教程。问题或建议，请公众号留言；

效果：

上图计算器是使用Trae让DeepSeek帮我开发的，功能都可以用，页面和很美观！都是一条指令完成的，包括文件创建和代码生成。

下面给大家分享一下代码：

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页计算器</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="calculator">
    <div class="display">0</div>
    <div class="buttons">
      <button class="operator" data-action="clear">C</button>
      <button class="operator" data-action="sign">±</button>
      <button class="operator" data-action="percent">%</button>
      <button class="operator" data-action="divide">÷</button>
      
      <button data-number="7">7</button>
      <button data-number="8">8</button>
      <button data-number="9">9</button>
      <button class="operator" data-action="multiply">×</button>
      
      <button data-number="4">4</button>
      <button data-number="5">5</button>
      <button data-number="6">6</button>
      <button class="operator" data-action="subtract">-</button>
      
      <button data-number="1">1</button>
      <button data-number="2">2</button>
      <button data-number="3">3</button>
      <button class="operator" data-action="add">+</button>
      
      <button data-number="0" class="span-2">0</button>
      <button data-number=".">.</button>
      <button class="operator" data-action="calculate">=</button>
    </div>
  </div>
  <script src="./app.js"></script>
</body>
</html>

CSS

.calculator {
  width: 320px;
  margin: 50px auto;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.display {
  background: #fff;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  text-align: right;
  font-size: 2em;
  height: 60px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

button {
  padding: 20px;
  border: none;
  background: #fff;
  border-radius: 5px;
  font-size: 1.2em;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #e0e0e0;
}

.operator {
  background: #ff9500;
  color: white;
}

.operator:hover {
  background: #ff7b00;
}

.span-2 {
  grid-column: span 2;
}

JavaScript

let displayValue = '0';
let firstOperand = null;
let operator = null;
let waitingForSecondOperand = false;

const display = document.querySelector('.display');
const buttons = document.querySelectorAll('button');

function updateDisplay() {
  display.textContent = displayValue;
}

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const action = button.dataset.action;
    const number = button.dataset.number;

    if (number) {
      handleNumber(number);
    } else if (action) {
      handleOperator(action);
    }
  });
});

function handleNumber(num) {
  if (waitingForSecondOperand) {
    displayValue = num;
    waitingForSecondOperand = false;
  } else {
    displayValue = displayValue === '0' ? num : displayValue + num;
  }
  updateDisplay();
}

function handleOperator(op) {
  switch(op) {
    case 'clear':
      displayValue = '0';
      firstOperand = null;
      operator = null;
      waitingForSecondOperand = false;
      break;
    case 'sign':
      displayValue = (parseFloat(displayValue) * -1).toString();
      break;
    case 'percent':
      displayValue = (parseFloat(displayValue) / 100).toString();
      break;
    case 'calculate':
      if (operator && firstOperand !== null) {
        const result = calculate(firstOperand, displayValue, operator);
        displayValue = result.toString();
        firstOperand = result;
        operator = null;
        waitingForSecondOperand = true;
      }
      break;
    default:
      if (operator && !waitingForSecondOperand) {
        const result = calculate(firstOperand, displayValue, operator);
        displayValue = result.toString();
        firstOperand = result;
      } else {
        firstOperand = parseFloat(displayValue);
      }
      operator = op;
      waitingForSecondOperand = true;
  }
  updateDisplay();
}

function calculate(a, b, op) {
  a = parseFloat(a);
  b = parseFloat(b);
  switch(op) {
    case 'add': return a + b;
    case 'subtract': return a - b;
    case 'multiply': return a * b;
    case 'divide': return b === 0 ? '错误' : a / b;
    default: return b;
  }
}

updateDisplay();

如果你没有使用过Trae，可以查看作者前期发布的文章！