gpt4 book ai didi

javascript - 如何给计算器添加按钮

转载 作者:行者123 更新时间:2023-11-28 06:23:03 27 4
gpt4 key购买 nike

我需要做一个计算器,并想添加几个按钮。

现在,我正在使用百分比按钮。我用另一个计算器复制了按钮的逻辑,但它不起作用。

我问这个是因为我不太了解 JavaScript。现在我正在 codecademy.com 上学习一门类(class)。

我不想使用 jQuery。

var box = document.getElementById('display');

function addtoscreen(x) {
box.value += x;

if (x == 'c') {
box.value = ' ';
}
}

function answer() {
x = box.value;
x = eval(x);
box.value = x;
}

function backspace() {
var number = box.value;
var len = number.length - 1;
var newnumber = number.substring(0, len);
box.value = newnumber;
}

function power(y) {
x = box.value;
x = Math.pow(x, y);
box.value = x;
}

function btnMod() {
dokument.calculator.display.value += "%";
}
#calculator {
width: 250px;
height: 400px;
border: 1px solid black;
text-align: center;
margin: 150px auto;
box-shadow: 0px 0px 20px gray;
background: green;
}
#display {
margin-top: 25px;
margin-bottom: 20px;
width: 210px;
height: 25px;
border: 1px solid red;
box-shadow: 0px 0px 30px red;
text-align: right;
font: 20px bold;
color: blue;
}
#keys {
width: 41px;
height: 35px;
margin-left: 10px;
margin-bottom: 20px;
box-shadow: 0px 0px 20px skyblue;
cursor: poitner;
}
# keys:hover {
background: yellow;
font-weight: bold;
}
#equal {
width: 90px;
height: 35px;
margin-left: 10px;
margin-bottom: 20px;
box-shadow: 0px 0px 20px skyblue;
cursor: poitner;
}
# equal:hover {
background: yellow;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<title>Calculator</title>
<body>
<div id="calculator">
<form>
<input type="text" id="display">
<br>
<input type="button" value="C" id="keys" onclick="addtoscreen('c')">
<input type="button" value="<--" id="keys" onclick="backspace() ">
<input type="button" value="X^2" id="keys" onclick="power(2) ">
<input type="button" value="+" id="keys" onclick="addtoscreen('+')">
<input type="button" value="%" id="keys" onclick="btnMod()" <br>

<input type="button" value="9" id="keys" onclick="addtoscreen('9')">
<input type="button" value="8" id="keys" onclick="addtoscreen('8')">
<input type="button" value="7" id="keys" onclick="addtoscreen('7')">
<input type="button" value="-" id="keys" onclick="addtoscreen('-')">
<br>
<input type="button" value="6" id="keys" onclick="addtoscreen('6')">
<input type="button" value="5" id="keys" onclick="addtoscreen('5')">
<input type="button" value="4" id="keys" onclick="addtoscreen('4')">
<input type="button" value="*" id="keys" onclick="addtoscreen('*')">
<br>
<input type="button" value="3" id="keys" onclick="addtoscreen('3')">
<input type="button" value="2" id="keys" onclick="addtoscreen('2')">
<input type="button" value="1" id="keys" onclick="addtoscreen('1')">
<input type="button" value="/" id="keys" onclick="addtoscreen('/')">
<br>
<input type="button" value="0" id="keys" onclick="addtoscreen('0')">
<input type="button" value="." id="keys" onclick="addtoscreen('.')">
<input type="button" value="=" id="equal" onclick="answer()">
</form>
<script src="implementation.js"></script>
</body>
</html>

最佳答案

document.calculator.display 未定义,您可以简单地使用之前创建的 box 变量,请参阅下面的代码片段。这是最后插入的新函数:

function btnMod() {
box.value += "%";
}

var box = document.getElementById('display');

function addtoscreen(x) {
box.value += x;

if (x == 'c') {
box.value = ' ';
}
}


function answer() {
x = box.value;
x = eval(x);
box.value = x;
}

function backspace() {
var number = box.value;
var len = number.length - 1;
var newnumber = number.substring(0, len);
box.value = newnumber;
}

function power(y) {
x = box.value;
x = Math.pow(x, y);
box.value = x;
}

function btnMod() {
box.value += "%";
}
#calculator {


width: 250px;


height: 400px;


border: 1px solid black;


text-align: center;


margin: 150px auto;


box-shadow: 0px 0px 20px gray;


background: green;


}


#display {


margin-top: 25px;


margin-bottom: 20px;


width: 210px;


height: 25px;


border: 1px solid red;


box-shadow: 0px 0px 30px red;


text-align: right;


font: 20px bold;


color: blue;


}


#keys {


width: 41px;


height: 35px;


margin-left: 10px;


margin-bottom: 20px;


box-shadow: 0px 0px 20px skyblue;


cursor: poitner;


}


# keys:hover {


background: yellow;


font-weight: bold;


}


#equal {


width: 90px;


height: 35px;


margin-left: 10px;


margin-bottom: 20px;


box-shadow: 0px 0px 20px skyblue;


cursor: poitner;


}


# equal:hover {


background: yellow;


font-weight: bold;


}
<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" type="text/css" href="design.css">
</head>

<title>Calculator</title>

<body>
<div id="calculator">
<form>
<input type="text" id="display">
<br>
<input type="button" value="C" id="keys" onclick="addtoscreen('c')">
<input type="button" value="<--" id="keys" onclick="backspace() ">
<input type="button" value="X^2" id="keys" onclick="power(2) ">
<input type="button" value="+" id="keys" onclick="addtoscreen('+')">
<input type="button" value="%" id="keys" onclick="btnMod()" <br>

<input type="button" value="9" id="keys" onclick="addtoscreen('9')">
<input type="button" value="8" id="keys" onclick="addtoscreen('8')">
<input type="button" value="7" id="keys" onclick="addtoscreen('7')">
<input type="button" value="-" id="keys" onclick="addtoscreen('-')">
<br>


<input type="button" value="6" id="keys" onclick="addtoscreen('6')">
<input type="button" value="5" id="keys" onclick="addtoscreen('5')">
<input type="button" value="4" id="keys" onclick="addtoscreen('4')">
<input type="button" value="*" id="keys" onclick="addtoscreen('*')">
<br>

<input type="button" value="3" id="keys" onclick="addtoscreen('3')">
<input type="button" value="2" id="keys" onclick="addtoscreen('2')">
<input type="button" value="1" id="keys" onclick="addtoscreen('1')">
<input type="button" value="/" id="keys" onclick="addtoscreen('/')">
<br>


<input type="button" value="0" id="keys" onclick="addtoscreen('0')">
<input type="button" value="." id="keys" onclick="addtoscreen('.')">
<input type="button" value="=" id="equal" onclick="answer()">
</form>

<script src="implementation.js"></script>
</body>

</html>

关于javascript - 如何给计算器添加按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35353078/

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