gpt4 book ai didi

JavaScript 计算器 - 允许负数作为第一个操作数

转载 作者:行者123 更新时间:2023-12-02 02:02:14 28 4
gpt4 key购买 nike

我正在开发一个基本的 JavaScript 计算器,我也希望能够开始计算负数。现在,如果我在输入数字之前单击“-”,“-”将不会显示,因此我只能从正数开始。有人可以告诉我如何将其包含在我的代码中吗?

const prevText = document.querySelector('[data-prev]');
const currentText = document.querySelector('[data-current]');
const buttons = document.querySelectorAll('.btn');
const resetBtn = document.querySelector('[data-reset]');
const delBtn = document.querySelector('[data-delete]');
const numberBtn = document.querySelectorAll('[data-number]');
const operationBtn = document.querySelectorAll('[data-operator]');
const equalBtn = document.querySelector('[data-equal]');

class Calculator {
constructor(prevText, currentText) {
this.prevText = prevText;
this.currentText = currentText;
this.clear();
}

clear() {
this.prev = '';
this.current = '';
this.operator = undefined;
}

delete() {
this.current = this.current.toString().slice(0, -1);
if (this.current === '') {
this.current = this.prev;
this.prev = '';
this.operator = undefined;
}
}


appendNumber(nr) {
this.current = this.current.toString() + nr.toString();
}

chooseOperation(operator) {
if (this.current === '') return;
if (this.prev !== '') {
this.calculate();
}

this.operator = operator;
this.prev = this.current;
this.current = '';
}

calculate() {
let result;
const previousValue = parseInt(this.prev);
const currentValue = parseInt(this.current);

if (isNaN(previousValue) || isNaN(currentValue)) return;

switch (this.operator) {
case '+':
result = previousValue + currentValue;
break;
case '-':
result = previousValue - currentValue;
break;
default:
return;
}
this.current = result;
this.operator = undefined;
this.prev = '';
}

getDisplayNr(nr) {
const floatNr = parseFloat(nr);
if (isNaN(floatNr)) return '';
return floatNr.toLocaleString('en');
}

updateDisplay() {
this.currentText.innerText = this.getDisplayNr(this.current);
// this.prevText.innerText = this.prev;
if (this.operator != null) {
this.prevText.innerText = ` ${this.getDisplayNr(this.prev)} ${
this.operator
}`;
} else {
this.prevText.innerText = '';
}
}
}


const calculator = new Calculator(prevText, currentText);

numberBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.appendNumber(btn.innerText);
calculator.updateDisplay();
});
});

operationBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.chooseOperation(btn.innerText);

calculator.updateDisplay();
});
});

equalBtn.addEventListener('click', (btn) => {
calculator.calculate();
calculator.updateDisplay();
});

resetBtn.addEventListener('click', (btn) => {
calculator.clear();
calculator.updateDisplay();
});

delBtn.addEventListener('click', (btn) => {
calculator.delete();
calculator.updateDisplay();
});
<div class="calculator">
<div class="calculation">
<div data-prev class="prev"></div>
<div data-current class="current"></div>
<!-- <div class="display">0</div> -->
</div>
<button class="bigger reset btn" data-reset>RES</button>
<button class="bigger delete btn" data-delete>DEL</button>
<button class="nr btn" data-number>1</button>
<button class="nr btn" data-number>2</button>
<button class="nr btn" data-number>3</button>
<button class="plus operator btn" data-key='plus' data-operator>+</button>
<button class="nr btn" data-number>4</button>
<button class="nr btn" data-number>5</button>
<button class="nr btn" data-number>6</button>
<button class="minus operator btn" data-key='minus' data-operator>-</button>
<button class="nr btn" data-number>7</button>
<button class="nr btn" data-number>8</button>
<button class="nr btn" data-number>9</button>
<button class="nr btn" data-number>0</button>
<button class="bigger equal btn" data-equal>=</button>
</div>

最佳答案

您可以在 checkOperator 方法中添加对 - 的检查。如果找到 - 并且 currentValuenull,则将 currentValue 设置为 0

我在下面添加了两行;

if (this.current === '' && !operator == '-') return;
if (this.current === '' && operator == '-') this.current = 0;

请参阅下面的代码段:

const prevText = document.querySelector('[data-prev]');
const currentText = document.querySelector('[data-current]');
const buttons = document.querySelectorAll('.btn');
const resetBtn = document.querySelector('[data-reset]');
const delBtn = document.querySelector('[data-delete]');
const numberBtn = document.querySelectorAll('[data-number]');
const operationBtn = document.querySelectorAll('[data-operator]');
const equalBtn = document.querySelector('[data-equal]');

class Calculator {
constructor(prevText, currentText) {
this.prevText = prevText;
this.currentText = currentText;
this.clear();
}

clear() {
this.prev = '';
this.current = '';
this.operator = undefined;
}

delete() {
this.current = this.current.toString().slice(0, -1);
if (this.current === '') {
this.current = this.prev;
this.prev = '';
this.operator = undefined;
}
}


appendNumber(nr) {
this.current = this.current.toString() + nr.toString();
if(this.prev == '')
this.calculate();
}

chooseOperation(operator) {
if (this.current === '' && !operator == '-') return;
//if (this.current === '' && operator == '-') this.current = 0;
if (this.prev !== '') {
this.calculate();
}

this.operator = operator;
this.prev = this.current;
this.current = '';
}

calculate() {
let result;
const previousValue = parseInt(this.prev) || 0;
const currentValue = parseInt(this.current);

if (isNaN(previousValue) || isNaN(currentValue)) return;

switch (this.operator) {
case '+':
result = previousValue + currentValue;
break;
case '-':
result = previousValue - currentValue;
break;
default:
return;
}
this.current = result;
this.operator = undefined;
this.prev = '';
}

getDisplayNr(nr) {
const floatNr = parseFloat(nr);
if (isNaN(floatNr)) return '';
return floatNr.toLocaleString('en');
}

updateDisplay() {
this.currentText.innerText = this.getDisplayNr(this.current);
// this.prevText.innerText = this.prev;
if (this.operator != null) {
this.prevText.innerText = ` ${this.getDisplayNr(this.prev)} ${
this.operator
}`;
} else {
this.prevText.innerText = '';
}
}
}


const calculator = new Calculator(prevText, currentText);

numberBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.appendNumber(btn.innerText);
calculator.updateDisplay();
});
});

operationBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.chooseOperation(btn.innerText);

calculator.updateDisplay();
});
});

equalBtn.addEventListener('click', (btn) => {
calculator.calculate();
calculator.updateDisplay();
});

resetBtn.addEventListener('click', (btn) => {
calculator.clear();
calculator.updateDisplay();
});

delBtn.addEventListener('click', (btn) => {
calculator.delete();
calculator.updateDisplay();
});
<div class="calculator">
<div class="calculation">
<div data-prev class="prev"></div>
<div data-current class="current"></div>
<!-- <div class="display">0</div> -->
</div>
<button class="bigger reset btn" data-reset>RES</button>
<button class="bigger delete btn" data-delete>DEL</button>
<button class="nr btn" data-number>1</button>
<button class="nr btn" data-number>2</button>
<button class="nr btn" data-number>3</button>
<button class="plus operator btn" data-key='plus' data-operator>+</button>
<button class="nr btn" data-number>4</button>
<button class="nr btn" data-number>5</button>
<button class="nr btn" data-number>6</button>
<button class="minus operator btn" data-key='minus' data-operator>-</button>
<button class="nr btn" data-number>7</button>
<button class="nr btn" data-number>8</button>
<button class="nr btn" data-number>9</button>
<button class="nr btn" data-number>0</button>
<button class="bigger equal btn" data-equal>=</button>
</div>

新更新

您还可以在 appendNumber 方法中添加以下条件。如果您首先选择任何运算符,这将调用 calculate 方法。

if(this.prev == '')
this.calculate();

关于JavaScript 计算器 - 允许负数作为第一个操作数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68851001/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com