js version to realize calculator function
|
This article example shares the specific code of js to implement the calculator function for your reference. The specific content is as follows I completed this simple calculator under the guidance of the teacher. It was a magical process. The basic functions of the calculator are all available. Although it is a simple calculator, it still requires strong logical judgment ability for beginners. There are many conditions in it. As a developer, you have to constantly look for bugs in the design and constantly improve user needs. All of these require clear logical reasoning and judgment. I am a little overwhelmed.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Calculator</title>
<style>
*{
padding:0;
margin:0;
}
table{
width:400px;
margin:auto;
border:1px solid silver;
border-collapse: collapse;/*spacing between columns*/
}
td {
width: 100px;
border: 1px solid #525252;
}
td input{
width:98.7%;
height:60px;
outline: none;
text-align: right;
font-size: 20px;
background: rgba(251, 255, 227, 0.81);
}
td button{
width:100%;
height:60px;
font-size: 22px;
background: rgba(223, 255, 243, 0.81);
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4" ><input id="text" type="text" value="0" /></td>
</tr>
<tr>
<td colspan="2"><button class="btn">del</button></td>
<td colspan="2"><button class="btn">c</button></td>
</tr>
<tr>
<td><button class="btn">9</button></td>
<td><button class="btn">8</button></td>
<td><button class="btn">7</button></td>
<td><button class="btn">+</button></td>
</tr>
<tr>
<td><button class="btn">6</button></td>
<td><button class="btn">5</button></td>
<td><button class="btn">4</button></td>
<td><button class="btn">-</button></td>
</tr>
<tr>
<td><button class="btn">3</button></td>
<td><button class="btn">2</button></td>
<td><button class="btn">1</button></td>
<td><button class="btn">*</button></td>
</tr>
<tr>
<td><button class="btn">0</button></td>
<td><button class="btn">.</button></td>
<td><button class="btn">=</button></td>
<td><button class="btn">/</button></td>
</tr>
</table>
<!--<span id="m">8</span>-->
<script>
/* var M = document.getElementById ("m");
console.log(M.innerHTML);
console.log(M.innerText);*/
//Get the button var buttonal = document.getElementsByClassName ("btn");
var textal = document.getElementById("text");
var res=[]; //Define an array to store the input value var label=false;
for(var i=0;i<buttonal.length;i++){
buttonal [i].onclick=addclick;
function addclick(){
// Input is a number or "."
if(!isNaN(this.innerHTML) || this.innerHTML=="."){
//The initial value of the text box is not 0
label = true;
if(textal.value!== "0"){
//The text box contains "."
if(textal.value.indexOf(".")!==-1){
//Handle the problem of duplicate points. There is a point in the text box that cannot be clicked (the number pressed by the user must be added, and the user presses a point but does not add it)
//When inputting "."if(this.innerHTML!== "."){
textal.value+=this.innerHTML;
}
}
else{
textal.value+=this.innerHTML;
}
}
//The initial value of the text box is 0
else{
if(this.innerHTML == "."){
textal.value="0"+this.innerHTML;
}
else{
textal.value=this.innerHTML;
}
}
}
//Non-digit else{
switch(this.innerHTML) {
case "+" :save(this);
break;
case "-" :save(this);
break;
case "/" :save(this);
break;
case "*":save(this);
break;
case "=":
res.push(textal.value);
var result = eval(res.join(""));
if(result == "Infinity"){
remove_add ("remove");
}
textal.value=result==Infinity?"The divisor cannot be zero":result;
//console.log(res.join(""));
res=[];
break;
case "del":
//Subtract numbers one by one from the back to the front substr(start,count) substring(start,end) end is not taken textal.value = textal.value.length==1 ? "0":textal.value.substr(0,textal.value.length-1);
break;
case "c":
textal.value="0";
res=[];
remove_add("add");
break;
}
}
}
}
function save(mini){
//Store the value pressed by the user before clearing the screen //Confirm a condition whether the user presses symbols continuously or numbers + symbolsif(!label){ //When pressing a symbol twice in a rowres[res.length-1]=mini.innerHTML; //The second pressed symbol replaces the first one}
else{
res.push(textal.value);
res.push(mini.innerHTML);
}
textal.value="0";
label=false;
}
//Unload all events except c function remove_add(p){
for(var i=0;i<buttonal.length;i++){
if(p == "add"){
buttonal[i].onclick = addclick;
}
else{
if(buttonal[i].innerHTML!="c"){
buttonal[i].onclick = null;
}
}
}
}
</script>
</body>
</html>Effect picture:
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:
|
<<: MySQL 20 high-performance architecture design principles (worth collecting)
Recommend
SSH port forwarding to achieve intranet penetration
The machines in our LAN can access the external n...
Mini Programs use Mini Program Cloud to implement WeChat payment functions
Table of contents 1. Open WeChat Pay 1.1 Affiliat...
Mysql | Detailed explanation of fuzzy query using wildcards (like,%,_)
Wildcard categories: %Percent wildcard: indicates...
How to hide rar files in pictures
You can save this logo locally as a .rar file and...
Mysql dynamically updates the database script example explanation
The specific upgrade script is as follows: Dynami...
Detailed explanation of obtaining, assigning, and registering radio values in HTML
1. Radio grouping As long as the name is the same,...
Implementation idea of left alignment of the last row of flex box layout
Using flex layout, if it is a nine-square grid, i...
Vue simulates the shopping cart settlement function
This article example shares the specific code of ...
Linux installation apache server configuration process
Prepare the bags Install Check if Apache is alrea...
js implements a simple calculator
Use native js to implement a simple calculator (w...
CSS multi-level menu implementation code
This is a pretty cool feature that makes web page...
Mysql error: Too many connections solution
MySQL database too many connections This error ob...
Detailed explanation of Vue components
<body> <div id="root"> <...
Nginx configuration 80 port access 8080 and project name address method analysis
Tomcat accesses the project, usually ip + port + ...
Analyze the working principle of Tomcat
SpringBoot is like a giant python, slowly winding...