JQuery Calculator Example In ASP.NET Web Forms
The image above is a jquery/javascript calculator developed in ASP.NET 4.0 web template. Here's the functions. I'wont be posting all codes since it will took up space in my post. I'll just post the sqrt() and a number scripts. The ASPX markup uses plain css for centering and aligning the buttons and html controls. No asp.net server controls are involved. For the jquery processing, im using the id selector.
Make sure to register your jquery script in your asp.net content/master page.
/* show zero to textbox on page load */ $("#txtCalc").ready(function () { $("#txtCalc").val("0"); }); //square root $("#btnSqrt").click(function () { var text = $("#txtCalc").val(); //if invalid input,do not execute codes below if (text.search("Invalid") != -1) { return; } if (text.length == 1) { if (text == "0") { return; } else //text is 3 { var x = parseFloat($("#txtCalc").val()); var str = Math.sqrt(x); $("#txtCalc").val(str); result = str; arrayComputation = ""; $("#labelArray").val(""); } } else { //length is two if (text.indexOf("-") != -1) { $("#txtCalc").val("Invalid Input"); return; } else { var x = parseFloat($("#txtCalc").val()); var str = Math.sqrt(x); $("#txtCalc").val(str); result = str; arrayComputation = ""; $("#labelArray").val(""); } } operatorPressed = "0"; }); /* NUMBER BUTTONS */ $("#btnZero").click(function () { //conditions aron mu reset ang input //if an operator is typed if (operatorPressed == 1) { $("#txtCalc").val(""); operatorPressed = 0; } var text = $("#txtCalc").val(); //if invalid input,do not execute codes below if (text.search("Invalid") != -1) { return; } if (text.length == 1) { if (text != "0") { var str = $("#txtCalc").val(); var newStr = str.concat($("#btnZero").attr("value")); $("#txtCalc").val(newStr); } } else { //length is two var str = $("#txtCalc").val(); var newStr = str.concat($("#btnZero").attr("value")); $("#txtCalc").val(newStr); } }); //end click button zero
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <script type="text/javascript" src="Scripts/jquery-1.4.1.js" language="javascript"> </script>
wow!you're good...
ReplyDelete