javascript - 如何使 JS/HTML5 计算器的结果变为多行？

标签 javascript html calculator calc

如何使 JS/HTML5 计算器的结果变为多行？基本上，如果结果不适合第一行，它将在下一行中继续结果。我在任何地方都找不到如何执行此操作，无论是在 StackOverFlow、YouTube 还是任何地方。

我的代码:

<!DOCTYPE html>
<html>
<head>
<title>Calc</title>
<style>
button {width: 30px; height: 30px;}
input {text-align: center;height: 30px;}
.calc {border: groove 6px; margin-left: 530px; margin-right: 530px; padding-top: 10px; padding-bottom: 10px; height: 255px;}
.results {padding-bottom: 7px;}
.top {float: left; padding-left: 20px;}
.numbers {float: left; padding-left: 20px; padding-top: 15px;}
.symbols {float: right; margin-top: -30px; padding-right: 20px;}
</style>
<script>
function myFunction(clickedId) {
    document.calc.result.value+=clickedId;
}
function Clear() {
    document.calc.result.value="";
}
function compute() {
 try{
 var inp=eval(document.calc.result.value);
 document.calc.result.value=inp;
 }
 catch(err){
  document.calc.result.value="error";
 }
}
function doMath() {
 var inputNum1=document.calc.result.value;
 var result = Math.sqrt(inputNum1);
 document.calc.result.value = result;
}
function myMultiply() {
 var x = parseInt (document.calc.result.value, 10);
 var y = x*x;
 alert(x + " times " + x + " equals " + y);
 return false;
}
function compute() {
 try{
    var inp=eval(document.calc.result.value);
    if(document.calc.result.value==inp)
    inp=inp*inp
    document.calc.result.value=inp;
 }
 catch(err){
  document.calc.result.value="error";
 }
}
</script>
</head>
<body>
<div class="calc">
<center>
<div class="results">
    <form name="calc">
    <input type="text" name="result" readonly>
    </form>
</div>
<table>
<div class="top">
    <button type="button" id="CLEAR" onclick="Clear()"><font color="#CC0000"><b>c</b></font></button> <!--Izdzēst rakstīto-->
    <button type="button" id="3.141592653589793" onclick="myFunction(this.id)">π</button> <!--Skaitlis 3.14...-->
    <button type="button" id="6.283185307179586" onclick="myFunction(this.id)">τ</button><br> <!--Skaitlis 6.28...-->
</div>
<div class="numbers">
    <button type="button" id="1" onclick="myFunction(this.id)">1</button> <!--Skaitlis 1-->
    <button type="button" id="2" onclick="myFunction(this.id)">2</button> <!--Skaitlis 2-->
    <button type="button" id="3" onclick="myFunction(this.id)">3</button><br> <!--Skaitlis 3-->
    <button type="button" id="4" onclick="myFunction(this.id)">4</button> <!--Skaitlis 4-->
    <button type="button" id="5" onclick="myFunction(this.id)">5</button> <!--Skaitlis 5-->
    <button type="button" id="6" onclick="myFunction(this.id)">6</button><br> <!--Skaitlis 6-->
    <button type="button" id="7" onclick="myFunction(this.id)">7</button> <!--Skaitlis 7-->
    <button type="button" id="8" onclick="myFunction(this.id)">8</button> <!--Skaitlis 8-->
    <button type="button" id="9" onclick="myFunction(this.id)">9</button><br> <!--Skaitlis 9-->
    <button type="button" id="0" onclick="myFunction(this.id)">0</button><br> <!--Skaitlis 0-->
</div>
<div class="symbols">
    <button type="button" id="ANS" onclick="compute()">=</button><br> <!--Vienādības zīme-->
	<button type="button" id="+" onclick="myFunction(this.id)">+</button><br> <!--Plusa zīme-->
    <button type="button" id="-" onclick="myFunction(this.id)">-</button><br> <!--Mīnusa zīme-->
    <button type="button" id="*" onclick="myFunction(this.id)">x</button><br> <!--Reizināšanas zīme-->
    <button type="button" id="/" onclick="myFunction(this.id)">÷</button><br> <!--Dalīšanas zīme-->
	<button type="button" id="SQRT" onclick="doMath()">√</button><br> <!--Kvadrātsakne-->
	<button type="button" id="imp*inp" onclick="compute()">²</button><br> <!--Kvadrāts-->
</div>
</table>
</center>
</div>
<center><p>Thanks to my peeps at <a href="http://www.stackoverflow.com">StackOverFlow</a> for helping me with some issues!</p></center> <!--Pateicības piezīme-->
</body>
</html>

最佳答案

只需使用 textarea 元素而不是 input type="text":

function myFunction(clickedId) {
    document.calc.result.value+=clickedId;
}
function Clear() {
    document.calc.result.value="";
}
function compute() {
 try{
 var inp=eval(document.calc.result.value);
 document.calc.result.value=inp;
 }
 catch(err){
  document.calc.result.value="error";
 }
}
function doMath() {
 var inputNum1=document.calc.result.value;
 var result = Math.sqrt(inputNum1);
 document.calc.result.value = result;
}
function myMultiply() {
 var x = parseInt (document.calc.result.value, 10);
 var y = x*x;
 alert(x + " times " + x + " equals " + y);
 return false;
}
function compute() {
 try{
    var inp=eval(document.calc.result.value);
    if(document.calc.result.value==inp)
    inp=inp*inp
    document.calc.result.value=inp;
 }
 catch(err){
  document.calc.result.value="error";
 }
}
button {width: 30px; height: 30px;}
textarea {text-align: center;height: 30px;width: 60px}
.calc {border: groove 6px; margin-left: 530px; margin-right: 530px; padding-top: 10px; padding-bottom: 10px; height: 255px;}
.results {padding-bottom: 7px;}
.top {float: left; padding-left: 20px;}
.numbers {float: left; padding-left: 20px; padding-top: 15px;}
.symbols {float: right; margin-top: -30px; padding-right: 20px;}
<!DOCTYPE html>
<html>
<head>
<title>Calc</title>
</head>
<body>
<div class="calc">
<center>
<div class="results">
    <form name="calc">
    <textarea name="result" readonly></textarea>
    </form>
</div>
<table>
<div class="top">
    <button type="button" id="CLEAR" onclick="Clear()"><font color="#CC0000"><b>c</b></font></button> <!--Izdzēst rakstīto-->
    <button type="button" id="3.141592653589793" onclick="myFunction(this.id)">π</button> <!--Skaitlis 3.14...-->
    <button type="button" id="6.283185307179586" onclick="myFunction(this.id)">τ</button><br> <!--Skaitlis 6.28...-->
</div>
<div class="numbers">
    <button type="button" id="1" onclick="myFunction(this.id)">1</button> <!--Skaitlis 1-->
    <button type="button" id="2" onclick="myFunction(this.id)">2</button> <!--Skaitlis 2-->
    <button type="button" id="3" onclick="myFunction(this.id)">3</button><br> <!--Skaitlis 3-->
    <button type="button" id="4" onclick="myFunction(this.id)">4</button> <!--Skaitlis 4-->
    <button type="button" id="5" onclick="myFunction(this.id)">5</button> <!--Skaitlis 5-->
    <button type="button" id="6" onclick="myFunction(this.id)">6</button><br> <!--Skaitlis 6-->
    <button type="button" id="7" onclick="myFunction(this.id)">7</button> <!--Skaitlis 7-->
    <button type="button" id="8" onclick="myFunction(this.id)">8</button> <!--Skaitlis 8-->
    <button type="button" id="9" onclick="myFunction(this.id)">9</button><br> <!--Skaitlis 9-->
    <button type="button" id="0" onclick="myFunction(this.id)">0</button><br> <!--Skaitlis 0-->
</div>
<div class="symbols">
    <button type="button" id="ANS" onclick="compute()">=</button><br> <!--Vienādības zīme-->
	<button type="button" id="+" onclick="myFunction(this.id)">+</button><br> <!--Plusa zīme-->
    <button type="button" id="-" onclick="myFunction(this.id)">-</button><br> <!--Mīnusa zīme-->
    <button type="button" id="*" onclick="myFunction(this.id)">x</button><br> <!--Reizināšanas zīme-->
    <button type="button" id="/" onclick="myFunction(this.id)">÷</button><br> <!--Dalīšanas zīme-->
	<button type="button" id="SQRT" onclick="doMath()">√</button><br> <!--Kvadrātsakne-->
	<button type="button" id="imp*inp" onclick="compute()">²</button><br> <!--Kvadrāts-->
</div>
</table>
</center>
</div>
<center><p>Thanks to my peeps at <a href="http://www.stackoverflow.com">StackOverFlow</a> for helping me with some issues!</p></center> <!--Pateicības piezīme-->
</body>
</html>

关于javascript - 如何使 JS/HTML5 计算器的结果变为多行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32145478/

上一篇：javascript - 使用 ng-repeat 在数组之间切换

下一篇：javascript - 使用 AngularJS 导航字符串的 "DOM"，就像它是 html 一样

相关文章：

javascript - 基本 JScalc.io 计算器问题(输出变量为空，不返回数字)

c - 如何通过输入字母来终止程序？

javascript - 在外部函数中使用 $(this)

javascript - 如果div中的文本是x，则仅对x元素执行jquery

javascript - 当 Javascript 被禁用时，如何检测并警告用户？

javascript - 我需要在加载页面和调整页面大小时根据窗口的大小设置div的高度

java，不使用整数(计算器)

javascript - 预定义参数

javascript - 使用 Rails 3.2.1 设计 + client_side_validations

html - 如何在不使用 javascript 的情况下设置 DIV 标签的滚动条？

©2024 IT工具网  联系我们