简体   繁体   English

将百分比按钮添加到JavaScript计算器

[英]Adding percentage button to javascript calculator

I am working on a calculator program to practice and aid in learning javascript. 我正在研究一个计算器程序,以练习和帮助学习JavaScript。 I have this so far: 到目前为止,我有:

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

I have a couple questions: 我有几个问题:

  1. I need a working percentage button, the one I have now does not do what I need it to do. 我需要一个工作百分比按钮,而我现在所拥有的按钮并不能满足我的需要。 It should display what precent the first input number is of the second. 它应该显示第一个输入数字占第二个输入数字的百分比。 Ie if the first number is 5 and the second is 20, then the result should be 25 (meaning 25 %). 即,如果第一个数字为5,第二个数字为20,则结果应为25(即25%)。
  2. I need to display all the operations entered, not only the results of the calculations performed by the user. 我需要显示所有输入的操作,而不仅仅是用户执行的计算结果。 For example, on 3+4, instead of just displaying "7", display "3 + 4 = 7". 例如,在3 + 4上,不仅显示“ 7”,还显示“ 3 + 4 = 7”。 Keep the display of all previous calculations in the input field, instead of just the current one. 在输入字段中保留所有先前计算的显示,而不仅仅是当前的显示。

Can someone help me out here? 有人可以帮我吗? Thanks! 谢谢!

The calculator above doesn't seem to work for me. 上面的计算器似乎不适用于我。
However, I can make a couple of suggestions that think will help you a long the way. 但是,我可以提出一些建议,这些建议对您有很大帮助。

A) Please don't take this the wrong way. A)请不要以错误的方式处理。 Part of programming is resolving the issues that you are having -- that is the fun of it. 编程的一部分是解决您遇到的问题,这就是乐趣。 Gets more fun when your under pressure of deadlines. 在截止日期的压力下获得更多乐趣。

B) I would recommend using jQuery. B)我建议使用jQuery。 You will inherently learn javascript. 您将天生学习javascript。

C) Finally, use div tags to write the validated key press to read from that separating the values by operators. C)最后,使用div标签编写经过验证的按键,以读取由操作员分隔值的按键。

eg: 例如:

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

Hope that helps - good luck with learning java 希望对您有所帮助-学习Java祝您好运

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM