首页猿问我怎样才能使用按钮进行加、乘和减

我怎样才能使用按钮进行加、乘和减

Html5

MM们 2023-12-19 16:44:44

当我单击程序中的按钮时，它们会记录在控制台中，但是如果我想添加这些数字，我该如何将它们放在一起？因此，如果我按 1+5，然后按等号按钮，它就会弹出： 1 + 5 =那么我怎样才能得到 6 或任何其他计算结果。我还想知道按下数字时如何在黑匣子（输入/屏幕）中显示数字。//Changing colors of operation colors //Multiply Colorconst colorMultiply = document.getElementById('multiply')colorMultiply.style.backgroundColor = "green"//Divide Colorconst colorDivide = document.getElementById('divide')colorDivide.style.backgroundColor = "red"//subtract colorconst colorSubtract = document.getElementById('subtract')colorSubtract.style.backgroundColor="blue"//add colorconst colorAdd = document.getElementById('add')colorAdd.style.backgroundColor="yellow"//change font of numbers to blue (I did it like this incase anyone wants to color of a single number)//Makes it easierconst number1 = document.getElementById('number1')number1.style.color="blue"const number2 = document.getElementById('number2')number2.style.color="blue"const number3 = document.getElementById('number3')number3.style.color="blue"const number4 = document.getElementById('number4')number4.style.color="blue"const number5 = document.getElementById('number5')number5.style.color="blue"const number6 = document.getElementById('number6')number6.style.color="blue"const number7 = document.getElementById('number7')number7.style.color="blue"const number8 = document.getElementById('number8')number8.style.color="blue"const number9 = document.getElementById('number9')number9.style.color="blue"const number0 = document.getElementById('number0')number0.style.color="blue"const decimal = document.getElementById('decimal')decimal.style.color="blue"//Changing color of the clear buttonconst clear = document.getElementById('clear')clear.style.color="white"clear.style.backgroundColor="black" }}

查看完整描述

1 回答

萧十郎

TA贡献1815条经验获得超12个赞

您可以使用 eval() 方法来计算表达式，但请记住，使用 eval() 存在安全风险 - 切勿尝试计算代码或可能来自应用程序外部的值。

在下面的代码中，我使用了一个数组来跟踪所有单击的参数。当用户单击 = 时，数组将连接成字符串并进行计算。您可能还想添加一些检查以确保表达式有效，例如在计算之前使用 for 循环进行验证。

测试并运行如下：

//Changing colors of operation colors

//Multiply Color

const colorMultiply = document.getElementById('multiply')

colorMultiply.style.backgroundColor = "green"

//Divide Color

const colorDivide = document.getElementById('divide')

colorDivide.style.backgroundColor = "red"

//subtract color

const colorSubtract = document.getElementById('subtract')

colorSubtract.style.backgroundColor="blue"

//add color

const colorAdd = document.getElementById('add')

colorAdd.style.backgroundColor="yellow"

//change font of numbers to blue (I did it like this incase anyone wants to color of a single number)

//Makes it easier

const number1 = document.getElementById('number1')

number1.style.color="blue"

const number2 = document.getElementById('number2')

number2.style.color="blue"

const number3 = document.getElementById('number3')

number3.style.color="blue"

const number4 = document.getElementById('number4')

number4.style.color="blue"

const number5 = document.getElementById('number5')

number5.style.color="blue"

const number6 = document.getElementById('number6')

number6.style.color="blue"

const number7 = document.getElementById('number7')

number7.style.color="blue"

const number8 = document.getElementById('number8')

number8.style.color="blue"

const number9 = document.getElementById('number9')

number9.style.color="blue"

const number0 = document.getElementById('number0')

number0.style.color="blue"

const decimal = document.getElementById('decimal')

decimal.style.color="blue"

//Changing color of the clear button

const clear = document.getElementById('clear')

clear.style.color="white"

clear.style.backgroundColor="black"

///////////////////////////////////////////////////////////////////////////////////////////////////////

// Then we want to insert `memoryStoreButton` before the `clear` button:

var memoryStoreButton = document.createElement("BUTTON");

memoryStoreButton.innerHTML = "MS";

clear.before(memoryStoreButton); //puts button before clear

// Then we want the `memoryClearButton` before `memoryStoreButton`

var memoryClearButton = document.createElement("BUTTON");

memoryClearButton.innerHTML = "MC";

memoryStoreButton.before(memoryClearButton);//puts button before clear

// and finally, the `memoryRestoreButton` before `memoryClearButton`

var memoryRestoreButton = document.createElement("BUTTON");

memoryRestoreButton.innerHTML = "MR";

memoryClearButton.before(memoryRestoreButton);//puts button before clear

///////////////////////////////////////////////////////////////////////////////////////////////////////////

//What numbers are pressed

var expression = [];

document.querySelector(".buttons8").onclick = function(e) {

if(e.target.nodeName === "BUTTON") {

if(e.target.innerHTML !== "=") {

expression.push(e.target.innerHTML);

} else {

console.log( eval(expression.join("")) );

expression = [];

}

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

.calculator8{

flex: 0 0 40%;

}

.screen8{

width: 100%;

font-size: 7rem;

padding: 0.5rem;

background: rgb(41,41,56);

color: white;

border:none;

}

.buttons8{

display: flex;

flex-wrap: wrap;

transition: all 0.5s linear;

}

button{

flex:0 0 25%;

border: 1px solid black;

padding: 0.25rem 0;

transition: all 2s ease;

}

.btn-grey{

background: rgb(224,224,224);

}

.btn8{

font-size: 4rem;

}

<h1> Calculator 8 </h1>

<form>

</form>

</div>

</section>

反对回复 2023-12-19

1 回答
0 关注
91 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

我怎样才能使用按钮进行加、乘和减

我怎样才能使用按钮进行加、乘和减

1 回答

添加回答