This article shares the specific code of making a simple calculator with js for your reference. The specific content is as follows To make a simple calculator as shown in the picture, you must first create a form and make it look like the one shown in the picture. <table border="1" cellspacing="0" > <tr><th colspan="2">Shopping Calculator</th></tr> <tr> <td>The first number</td> <td><input type="text" id="inputId1" /></td> </tr> <tr> <td>The second number</td> <td><input type="text" id="inputId2" /></td> </tr> <tr> <td><button type="button" onclick="cal('+')" >+</button></td> <td><button type="button" onclick="cal('-')" >-</button> <button type="button" onclick="cal('*')" >*</button> <button type="button" onclick="cal('/')" >/</button></td> </tr> <tr> <td>Calculation results</td> <td><input type="text" id="resultId"/></td> </tr> </table> Onclick uses the cal() method. In fact, I used add, sub, mul, and div methods at first. Later, I found that these four methods are the same except for the arithmetic operators. So I chose to use one method. When clicking the button, the arithmetic operator passed to the method is different. The code is as follows: <script type="text/javascript"> function cal(type){ var num1 = document.getElementById('inputId1'); var num2 = document.getElementById('inputId2'); var result; switch(type){ case '+': result = parseInt(num1.value) + parseInt(num2.value); break; case '-': result = parseInt(num1.value) - parseInt(num2.value); break; case '*': result = parseInt(num1.value) * parseInt(num2.value); break; case '/': result = parseInt(num1.value) / parseInt(num2.value); break; } var resultObj = document.getElementById('resultId'); resultObj.value = result; } </script> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Summary of MySQL lock knowledge points
>>: Analysis of permissions required to run docker
one, G:\MySQL\MySQL Server 5.7\bin> mysqld --i...
Selector Grouping Suppose you want both the h2 el...
Pitfalls encountered I spent the whole afternoon ...
1. Update the yum source The PostgreSQL version o...
Over a period of time, I found that many people d...
Cooper talked about the user's visual path, w...
Document mode has the following two functions: 1. ...
1. Environmental preparation: Operating system: C...
My system and software versions are as follows: S...
First way: skip-grant-tables: Very useful mysql s...
Database transaction isolation level There are 4 ...
1. Install dependency packages yum -y install gcc...
1. Introduction I recently worked on a project an...
Table of contents Find and fix table conflicts Up...
Two days ago, I took advantage of the Double 11 s...