The main function of the calculator is to perform numerical calculations.The development of a web instance of the calculator function helps to better grasp the basic numerical calculation capabilities of js. This example is designed to help readers whose js computing ability needs to be improved, develop and complete the calculator function step by step by themselves, and be familiar with js number processing methods.

The main function of the calculator is to perform numerical calculations.The development of a web instance of the calculator function helps to better grasp the basic numerical calculation capabilities of js.

This example analyzes the development steps of a js calculator in detail.It is best to have some basic js knowledge when learning this tutorial.

The calculator includes two parts, the display number area and the button area.First, compile the html elements of these two areas of the calculator, as shown below:

<div class="calculator_wrap" id="calculator"><!--Calculator outsourcing element--> <div class="show_num"><!--Display number area--> <div class="num_save" id ="numSave"></div><!--Calculation formula--> <div class="num_cur" id="numCur">0</div><!--Calculation result--> <div class=" show_m" id="showM">M</div><!--Memory storage logo--> </div> <div class="btn_wrap" id="btnWrap"><!--Button area--> < div class="btn" data-key="MC">MC</div><!--Remove memory--> <div class="btn" data-key="MR">MR</div>< !--Memory read--> <div class="btn" data-key="MS">MS</div><!--Store memory--> <div class="btn" data-key=" MA">M+</div><!--Memory plus--> <div class="btn" data-key="ML">M-</div><!--Memory minus--> <div class ="btn" data-key="BACK">←</div><!--Backspace--> <div class="btn" data-key="CE">CE</div><!-- Clear current --> <div class="btn" data-key="Clear">C</div><!--Clear--> <div class="btn" data-key="Negate">±< /div><!--Positive and negative conversion--> <div class="btn" data-key="Square">√￣</div><!--square root--> <div class="btn" data -key="Num" data-value="7">7</div><!--7--> <div class="btn" data-key="Num" data-value="8">8 </div><!--8--> <div class="btn" data-key="Num" data-value="9">9</div> <!--9--> <div class="btn" data-key="Base" data-value="/">/</div><!--Except--> <div class="btn" data-key="Percentage">%</div><!--Percent sign--> <div class="btn" data-key="Num" data-value="4">4</div> <!--4--> <div class="btn" data-key="Num" data-value="5">5</div><!--5--> <div class="btn" data-key="Num" data-value="6">6</div><!--6--> <div class="btn" data-key="Base" data-value="*"> *</div><!--Multiply--> <div class="btn" data-key="Reciprocal">1/x</div> <!--Countdown--> <div class="btn" data-key="Num" data-value="1">1</div><!--1--> <div class="btn" data-key="Num" data-value="2"> 2</div><!--2--> <div class="btn" data-key="Num" data-value="3">3</div><!--3--> <div class="btn" data-key="Base" data-value="-">-</div><!--Minus--> <div class="btn equal" data-key="Equal">= </div><!--equal to--> <div class="btn zero" data-key="Num" data-value="0">0</div><!--0--> <div class="btn" data-key="Point">.</div><!--Decimal point--> <div class="btn" data-key="Base" data-value="+">+< /div><!--Add--> </div></div>

Readers can write some styles by themselves and design a calculator effect they like. The calculator effect of this example is shown in the figure below:

Style code:

.calculator_wrap{width:240px;height:360px;padding:10px;margin:30px auto;border:1px solid #8acceb;background:#d1f1ff;}.calculator_wrap.show_num{position:relative;padding:0 8px;height:60px ;background:#fff;text-align:right;}.calculator_wrap.show_m{position: absolute;left:10px;bottom:3px;display:none;}.calculator_wrap.num_save{height:26px;line-height:26px; font-size:12px;white-space:nowrap;}.calculator_wrap.num_cur{font-size:28px;height:34px;line-height:34px;}.calculator_wrap.btn_wrap{font-size:0px;}.calculator_wrap.btn{display:inline-block;width:38px;height:38px;line-height:38px;text-align:center;border:1px solid #ccc;background:#666;color:#fff;font-size:14px ;margin:10px 10px 0 0;cursor:pointer;}.calculator_wrap.btn:hover{background:#333;}.calculator_wrap.btn:nth-child(5n){margin-right:0px;}.calculator_wrap.equal{ position:absolute;height:90px;line-height:90px;}.calculator_wrap.zero{width:90px;}

For novices, the calculator function seems very complicated, with so many buttons and multiple calculation methods, I don’t know how to start. In fact, for any function, you only need to clarify your thoughts and write the code step by step, and you will find that it is not difficult to implement.

1 Get each html element

No matter what the web front-end wants to do on the page, it must first obtain each DOM element on the page. It seems that the calculator has many buttons.In actual development, you can use the event proxy to operate the buttons, so only the container elements of all the buttons can be obtained. code show as below:

//Get outsourced elements var eCalculator = document.getElementById('calculator');//Save calculation data (formula) container var eNumSave = document.getElementById('numSave');//Current number container var eNumCur = document.getElementById( 'numCur');//Button external container, used for event proxy var eBtnWrap = document.getElementById('btnWrap');//Memory storage flag element var eShowM = document.getElementById('showM');

2 Declare related variables

In the process of calculation, some variables are needed to perform auxiliary calculations, store results and judgments, as shown below:

//Operation formula var sStep ='';//Current number var sCurValue = '0';//Calculation result var nResult = null;//Operator var sMark ='';//MR memory storage data var nMvalue = 0 ;//Enter the status.false: enter a number to replace the original number; true: enter a number to add to the original number; var bLogStatus = false;

3 Add a click event on the button

Because there are many buttons in the entire calculator, it would be too much to bind an event to each button alone, it would be too cumbersome, it would also affect performance, and it would be error-prone. So just got the external container eCalculator of the button.

To use the event proxy again, you only need to add a click event to the container, determine which button is currently clicked, and then perform the corresponding calculation. When clicking the button with the mouse, the text on the button may be selected because the button is clicked too fast.Therefore, it is necessary to add an operation to prevent the default behavior on the outsourcing container.The code is as follows:

//Add a mouse press event to the outsourcing container to prevent text selection eCalculator.addEventListener('mousedown',function(event){ //Prevent the default behavior when the mouse is pressed, and prevent text selection when the button is clicked too fast event.preventDefault ();});//Add a click event to the button container to act as a proxy for all button operations eBtnWrap.addEventListener('click',function(event){});

3.1 Get the clicked button and value

The event parameter passed in through the event function,.........