Use jQuery to create a simple calculator and jquery Calculator

Use jQuery to create a simple calculator and jquery Calculator

I am so excited to write my first blog post. If you have any mistakes, please point them out. I have a good temper and are eager to learn. Thank you for your guidance.

I have recently learned jquery and can write a calculator independently. I believe it will be of great help to your foundation.

So, it's time to talk nonsense.

Step 1:

Using div + css to implement a simple calculator page is relatively simple here and I will not talk about it much.

Take a look at it first (my personal feeling is still wide ).

 

<! -- This is the html part. -->
<Div id = "content"> 

/* = This is the css part = */* {margin: 0; padding: 0; box-sizing: border-box;} a {text-decoration: none;} # content {width: 255px; height: 245px; border: 2px solid # 0026FF; margin: 100px auto ;}. title-box {padding: 5px 0; font-size: 12px; color: # FFF; background: rgba (4,84, 235,1 );}. text-box {width: 240px; height: 30px; text-align: right; margin: 10px auto; border: 1px solid # CCC ;}. num {width: 200px; height: 170px; margin: 0 auto ;}. num-box {display: block; float: left; width: 40px; height: 30px; margin: 5px; text-align: center; line-height: 30px; border-radius: 5px; border: 1px solid rgba );}
Step 2: Click the number button to display the corresponding number in the text box .)
1. Create a variable Num1 to store the first number.
$ (Function () {// page Loading completed var Num1 = ""; // store number 1 });
2. click the button to obtain the number and display it in the text box.
// Add a click event to the number $ ('. num-num '). click (function () {var txt = $ (this ). text (); Num1 = Num1 + txt; $ ('. text-box '). text (Num1 );});
Step 3: (obtain and display operators)
1. Create a variable Char to store operators (+ ,-,*,/).
// Add a click event to the operator $ ('. num-char '). click (function () {Char = $ (this ). text (); $ ('. text-box '). text (Num1 + Char );});
 
Step 4: (implement 1 + 1 in the text box) use 1 + 1 as an example.
1. Create the variable Num2 to store the second number. If the operator is not clicked, enter the first number (Num1). If the operator (Char) is clicked, end the input of the first number (Num1) and start the second number (Num2) and displays 1 + 1 (first digit (Num1) operator (Char) Second digit (Num2). If multiple input operators (Char ), replace the current operator (Char ).
// Obtain the number and display the number var Num1 = ""; // store the number 1 var Num2 = ""; // store the number 2 var Char = ""; // Save the operator // Add a click event to the number $ ('. num-num '). click (function () {var txt = $ (this ). text (); if (Char = "") {// if the operator is not clicked, the first number is saved. If (Bbq = false) {Num1 = ""; Bbq = true;} Num1 = Num1 + txt; $ ('. text-box '). text (Num1);} else {Num2 = Num2 + txt; $ ('. text-box '). text (Num1 + Char + Num2 );}});
Step 5: (click "=" to output the result)
1. encapsulate the BeginChar () function to make a judgment. Different operators perform different operations.
Function BeginChar () {// make a judgment. Different operators perform different operations switch (Char) {case "+": Result = parseFloat (Num1) + parseFloat (Num2 ); break; case "-": Result = parseFloat (Num1)-parseFloat (Num2); break; case "*": Result = parseFloat (Num1) * parseFloat (Num2); break; case "/": Result = parseFloat (Num1)/parseFloat (Num2); break ;}}
2. Click the equal sign to output the result. NOTE: If Num1 and Num2 are empty, an error is returned.
(Pending... urgent)