将百分比按钮添加到JavaScript计算器
[英]Adding percentage button to javascript calculator
问题描述
我正在研究一个计算器程序，以练习和帮助学习JavaScript。 到目前为止，我有：
<!DOCtype html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-type" /> <title>Calculator</title> <h1><center>On-Line Calculator</center></h1> <script LANGUAGE="Javascript"> function addChar(input, character) { if(input.value == null || input.value == "0") input.value = character else input.value += character } function sqrt(form) { form.display.value = Math.sqrt(form.display.value); } function changeSign(input) { if(input.value.substring(0, 1) == "-") input.value = input.value.substring(1, input.value.length) else input.value = "-" + input.value } function compute(form) { form.display.value = eval(form.display.value) } function checkNum(str) { for (var i = 0; i < str.length; i++) { var ch = str.substring(i, i+1) if (ch < "0" || ch > "9") { if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "." && ch != "(" && ch!= ")") { alert("invalid entry!") return false } } } return true } </script> </head> <body> <form name="sci-calc"> <table border="2"CELLSPACING="1" CELLPADDING="5" align="center" > <tr> <td COLSPAN="3" align="center"><input name="display" value="0" SIZE="28" MAXLENGTH="25"></td> <td align="center" colspan="1" ><input type="button" value=" % " ONCLICK="addChar(this.form.display, '%')" style="width: 135px"></td> </tr> <tr> <td align="center" colspan="1" ><input type="button" value=" 7 " ONCLICK="addChar(this.form.display, '7')" style="width: 135px"></td> <td align="center" colspan="1" ><input type="button" value=" 8 " ONCLICK="addChar(this.form.display, '8')" style="width: 136px" ></td> <td align="center"colspan="1"><input type="button" value=" 9 " ONCLICK="addChar(this.form.display, '9')" style="width: 135px" ></td> <td align="center"colspan="1"><input type="button" value=" + " ONCLICK="addChar(this.form.display, '+')" style="width: 137px"></td> </tr> <tr> <td align="center"colspan="1"><input type="button" value=" 4 " ONCLICK="addChar(this.form.display, '4')" style="width: 133px"></td> <td align="center" colspan="1"><input type="button" value=" 5 " ONCLICK="addChar(this.form.display, '5')" style="width: 131px"></td> <td align="center"colspan="1"><input type="button" value=" 6 " ONCLICK="addChar(this.form.display, '6')" style="width: 134px"></td> <td align="center"colspan="1"><input type="button" value=" - " ONCLICK="addChar(this.form.display, '-')" style="width: 139px"></td> </tr> <tr> <td align="center"colspan="1" ><input type="button" value=" 1 " ONCLICK="addChar(this.form.display, '1')" style="width: 133px"></td> <td align="center" colspan="1"><input type="button" value=" 2 " ONCLICK="addChar(this.form.display, '2')" style="width: 128px"></td> <td align="center"colspan="1"><input type="button" value=" 3 " ONCLICK="addChar(this.form.display, '3')" style="width: 132px"></td> <td align="center"colspan="1"><input type="button" value=" * " ONCLICK="addChar(this.form.display, '*')" style="width: 137px"></td> </tr> <tr> <td align="center"colspan="1"><input type="button" value=" 0 " ONCLICK="addChar(this.form.display, '0')" style="width: 131px"></td> <td align="center" ><input type="button" value=" . " ONCLICK="addChar(this.form.display, '.')" style="width: 129px"></td> <td align="center"><input type="button" value=" sqrt " ONCLICK="if (checkNum(this.form.display.value)) { sqrt(this.form) }" style="width: 136px"></td> <td align="center"><input type="button" value=" / " ONCLICK="addChar(this.form.display, '/')" style="width: 139px"></td> </tr> <tr> <td align="center" ><input type="button" value=" ( " ONCLICK="addChar(this.form.display, '(')" style="width: 131px"></td> <td align="center" ><input type="button" value=" ) " ONCLICK="addChar(this.form.display, ')')" style="width: 132px"></td> <td align="center" ><input type="button" value="=" name="enter" ONCLICK="if (checkNum(this.form.display.value)) { compute(this.form) }" style="width: 141px"></td> <td align="center" ><input type="button" value="clear" ONCLICK="this.form.display.value = 0 " style="width: 141px"></td> </tr> </table> </form> </html>
我有几个问题：
- 我需要一个工作百分比按钮，而我现在所拥有的按钮并不能满足我的需要。 它应该显示第一个输入数字占第二个输入数字的百分比。 即，如果第一个数字为5，第二个数字为20，则结果应为25（即25％）。
- 我需要显示所有输入的操作，而不仅仅是用户执行的计算结果。 例如，在3 + 4上，不仅显示“ 7”，还显示“ 3 + 4 = 7”。 在输入字段中保留所有先前计算的显示，而不仅仅是当前的显示。
有人可以帮我吗？ 谢谢！
1 个解决方案
解决方案1
0 2014-12-11 00:05:59
上面的计算器似乎不适用于我。
但是，我可以提出一些建议，这些建议对您有很大帮助。
A）请不要以错误的方式处理。 编程的一部分是解决您遇到的问题，这就是乐趣。 在截止日期的压力下获得更多乐趣。
B）我建议使用jQuery。 您将天生学习javascript。
C）最后，使用div标签编写经过验证的按键，以读取由操作员分隔值的按键。
例如：
calculation=$('#output_div_id').val();
calculation_parts = calculation.split('+');
answer = parseInt(calculation_part[0]) + parseInt(calculation_part[1]).
$('#output_div_id').html($('#output_div_id').html()+ "=" + answer);
希望对您有所帮助-学习Java祝您好运
使用javascript的百分比计算器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.