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
Docker installation rocketMQ tutorial (most detailed)
RocketMQ is a distributed, queue-based messaging ...
MySQL 5.7 mysql command line client usage command details
MySQL 5.7 MySQL command line client using command...
Example of using nested html pages (frameset usage)
Copy code The code is as follows: <!DOCTYPE ht...
Several practical scenarios for implementing the replace function in MySQL
REPLACE Syntax REPLACE(String,from_str,to_str) Th...
How to use nginx to build a static resource server
Taking Windows as an example, Linux is actually t...
vue3 custom directive details
Table of contents 1. Registering custom instructi...
The table table uses: nth-child() to achieve alternate color change and alignment
Core code <!DOCTYPE html> <html lang=&qu...
Five ways to traverse objects in javascript Example code
Table of contents Prepare Five weapons for…in Obj...
Detailed explanation of Linux remote management and sshd service verification knowledge points
1. SSH remote management SSH Definition SSH (Secu...
Solution to MySQL IFNULL judgment problem
Problem: The null type data returned by mybatis d...
7 useful new TypeScript features
Table of contents 1. Optional Chaining 2. Null va...
MySQL 5.7.19 installation tutorial under Windows 10 How to change the root password of MySQL after forgetting it
Take MySQL 5.7.19 installation as an example, fir...
Problems and pitfalls of installing Mysql5.7.23 in Win10 environment
I read many tutorials, but found that I could nev...
mysql installer community 8.0.12.0 installation graphic tutorial
This tutorial shares the installation of mysql in...
How to use CSS attribute value regular matching selector (tips)
There are three types of attribute value regular ...