我的計算器無法在輸出屏幕內保留小數點(即1/3)。我試圖用parseFloat
將結果轉換成數字,然後使用Math。然後toString
將結果轉換回字符串並將其顯示在屏幕上,但它不起作用。請幫忙!!!計算器的小數點問題
$(document).ready(function() {
var testNumLength = function(number) {
if (number.length > 9) {
totaldiv.text(number.substr(number.length - 9, 9));
if (number.length > 15) {
number = "";
totaldiv.text("Err");
}
}
};
var entry = "";
var current = ""; //after operator is entered
var operator = "";
var res = "";
var totaldiv = $("#total");
totaldiv.text("0");
$("#numbers a").not("#clear,#clearall").click(function() {
entry += $(this).text(); //take the text of the numbers when clicked and append it to var entry
//display input1 on screen
totaldiv.html(entry);
testNumLength(entry);
})
$("#clear,#clearall").click(function() {
entry = "";
if ($(this).attr("id") === "clearall") {
current = "";
}
totaldiv.text("0");
})
$("#operators a").click(function() {
//append operators to var operator
operator = $(this).text();
current = entry;
entry = "";
})
$("#decimal").click(function() {
//var numOfDecs = 0;
for (var i = 0; i < entry.length; i++) {
if (entry.indexOf(".") == -1) {
entry += ".";
// numOfDecs += 1;
}
}
totaldiv.text(entry);
testNumLength(entry);
})
$("#equals").click(function() {
var result = eval(current + operator + entry);
entry = result;
testNumLength(result);
totaldiv.html(result);
})
})
body,
div,
a {
padding: 0;
margin: 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#calculator {
width: 310px;
height: 460px;
margin: 10px auto;
padding: 5px;
background-color: maroon;
border-radius: 10px;
border: 3px solid black;
}
#total {
height: 70px;
width: 300px;
margin: 0;
margin-bottom: 5px;
padding: 0 5px;
background-color: #FFF;
text-align: right;
font-size: 60px;
}
#numbers,
#operators {
margin: auto;
}
a {
cursor: pointer;
}
#operators a {
display: block;
width: 46px;
height: 45px;
float: left;
padding: 2px;
margin: 5px;
text-align: center;
text-decoration: none;
color: black;
font-size: 39px;
background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
border-radius: 10px;
}
#numbers a {
display: block;
float: left;
color: black;
font-size: 43px;
text-decoration: none;
width: 50px;
height: 50px;
padding: 10px;
margin: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
border-radius: 10px;
}
#side {
width: 49px;
float: right;
}
#side a {
border-radius: 10px;
text-align: center;
width: 40px;
height: 40px;
float: right;
font-size: 32px;
padding: 10px;
margin: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
}
a#equals {
padding-top: 50px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="calculator">
<div id="total">
</div>
<div id="operators">
<a id="plus">+</a>
<a id="minus">-</a>
<a id="divide">/</a>
<a id="times">*</a>
</div>
<div id="side">
<a id="sq">^</a>
<a id="sqrt">√</a>
<a id="decimal">.</a>
<a id="equals">=</a>
</div>
<div id="numbers">
<a id="clear">C</a>
<a id="clearall">AC</a>
<a id=>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
<a>9</a>
<a>0</a>
</div>
</div>
</body>
太棒了!非常感謝!它現在有效。 – ChuChu