2017-10-11 37 views
1

我的計算器無法在輸出屏幕內保留小數點(即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>

回答

0

您可以使用toFixed小數點後限制位數。所以0.333333333333333toFixed(2)將返回0.33

除此之外,您需要考慮小數點前的數字。因此,您需要計算小數點前的數字,並確保整個數字的長度不超過9位數。這是可以做到像這樣:

var integerPortionLength = result.toFixed(0).length; 
totaldiv.html(result.toFixed(9 - integerPortionLength)); 

下面是更新筆:https://codepen.io/anon/pen/JrZKxd?editors=0010

+1

太棒了!非常感謝!它現在有效。 – ChuChu

0

totaldiv.html(result.toFixed(6));

嘗試使用toFixed(n)

您可以切分結果編號。

+0

嘿,那是我第一次的猜測也是如此。但是,您還需要在小數點之前考慮數字。在我的答案中看到鋼筆。 – Nisarg

0
  • 如果是有關顯示 - 更改包含輸出號(下稱「總」)擁有的CSS樣式格「溢出:隱藏」
  • 如果這是你處理數字的方式,你可以把這些數字加一點。在Calculla上,我們使用簡單的方法:如果你想讓數字不再超過逗號後面的2個密碼(例如10.33而不是無限制的333333 ....),那麼對此:

    let outNumber = Math.round(inNumber * 100)/ 100;

    這不是一個完美的解決方案,但它很簡單,一般工作。 這與簡單地使用「toFixed(2)」的結果有點不同,但我會留給你看看。

0

嘗試toFixed()方法爲

totaldiv.html(result.toFixed(2));

$(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.toFixed(2)); 
 

 

 
    }) 
 

 
})
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>

+0

我剛發現另一個問題。我不能將數學運算連在一起,直到我擊中平等按鈕。它一次只能輸出2個輸入的正確結果...我該如何解決? – ChuChu

0

一個CSS唯一的解決辦法

#total { 
     .... 
     overflow: hidden; 
     text-overflow: ellipsis; 
    } 

$(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; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
#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>