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
Install .NET 6.0 in CentOS system using cloud server
.NET SDK Download Link https://dotnet.microsoft.c...
Detailed explanation of JavaScript primitive data type Symbol
Table of contents Introduction Description Naming...
MySQL's conceptual understanding of various locks
Optimistic Locking Optimistic locking is mostly i...
Nginx restricts IP access to certain pages
1. To prohibit all IP addresses from accessing th...
Application examples of WeChat applet virtual list
Table of contents Preface What is a virtual list?...
MySQL transaction, isolation level and lock usage example analysis
This article uses examples to describe MySQL tran...
MySQL replication detailed explanation and simple example
MySQL replication detailed explanation and simple...
uniapp dynamic modification of element node style detailed explanation
Table of contents 1. Modify by binding the style ...
Why is the disk space still occupied after deleting table data in MySQL?
Table of contents 1. Mysql data structure 2. The ...
Example of implementing skeleton screen with Vue
Table of contents Skeleton screen use Vue archite...
MySQL 8.0.11 compressed version installation and configuration method graphic tutorial
MySQL 8.0 compressed package installation method,...
Centos8 bridge static IP configuration method in VMware virtual machine
1. Make sure the network connection method is bri...
Implementation of Nginx domain name forwarding https access
A word in advance: Suddenly I received a task to ...
Vue template configuration and webstorm code format specification settings
Table of contents 1. Compiler code format specifi...
Detailed explanation of MySQL trigger trigger example
Table of contents What is a trigger Create a trig...