首頁猿問我怎樣才能使用按鈕進行加、乘和減

我怎樣才能使用按鈕進行加、乘和減

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條經驗獲得超13個贊

您可以使用 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 關注
160 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

我怎樣才能使用按鈕進行加、乘和減

我怎樣才能使用按鈕進行加、乘和減

1 回答

添加回答

我怎樣才能使用按鈕進行加、乘和減

我怎樣才能使用按鈕進行加、乘和減