Implementing a simple calculator based on JavaScript
|
This article shares the specific code of JavaScript to implement a simple calculator for your reference. The specific content is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<style>
.op {
margin: 50px auto;
width: 300px;
height: 300px;
border: 1px solid orange;
background-color: lightskyblue;
border-radius: 50px;
}
input {
width: 210px;
height: 30px;
border-radius: 5px;
}
button {
width: 30px;
height: 30px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="op">
<h2 align="center">Calculator</h2>
<form name="calculator">
<table align="center">
<tr>
<td>num1:</td>
<td><input type="text" name="num1"></td>
</tr>
<tr>
<td>num2:</td>
<td><input type="text" name="num2"></td>
</tr>
<tr>
<td colspan="2">         
<button type="button">+</button>
      
<button type="button">-</button>
      
<button type="button">*</button>
      
<button type="button">/</button>
</td>
</tr>
<tr>
<td>Results:</td>
<td><input type="text" name="result" disabled></td>
</tr>
</table>
</form>
</div>
<script>
//Get all element objects under the tag name and return an array let buttonArr = document.getElementsByTagName("button");
for (let but of buttonArr) {
but.addEventListener('click', function () {
let operator = this.innerHTML;
count(operator);
});
}
function count(operator) {
//Get the input value of the form calculator named num1 let num1 = parseFloat(document.calculator.num1.value);
let num2 = parseFloat(document.calculator.num2.value);
let result = '';
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if (num2 == 0) {
alert("The divisor cannot be zero");
return;
}
result = num1 / num2;
break;
}
//Assign the result to the input box with the attribute name result document.calculator.result.value = result;
}
</script>
</body>
</html> 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:
|
<<: Explanation of the configuration and use of MySQL storage engine InnoDB
>>: A brief understanding of several scheduling algorithms for Nginx seven-layer load balancing
Recommend
MYSQL5.6.33 database master/slave (Master/Slave) synchronization installation and configuration details (Master-Linux Slave-windows7)
1. Installation environment Here is also a record...
Analysis and explanation of the differences between DIV, Table and XHTML website building
To put it simply, website construction is about &q...
Echarts tutorial on how to implement tree charts
Treemaps are mainly used to visualize tree-like d...
Mysql5.7 my.ini file loading path and data location modification method under windows7
Update: Now you can go to the MySQL official webs...
How to deploy HTTPS for free on Tencent Cloud
Recently, when I was writing a WeChat applet, the...
How to implement an array lazy evaluation library in JavaScript
Table of contents Overview How to achieve it Spec...
Quickly get started with VUE 3 teleport components and usage syntax
Table of contents 1. Introduction to teleport 1.1...
Detailed tutorial on jdk installation and environment variable configuration under Win10
Table of contents Preface 1. Preparation 2. Insta...
CentOS installation mysql5.7 detailed tutorial
This article shares the detailed steps of install...
4 Practical Tips for Web Page Design
Related articles: 9 practical tips for creating we...
The difference between html empty link href="#" and href="javascript:void(0)"
# contains a location information. The default anc...
How to modify the user and group of a file in Linux
In Linux, when a file is created, the owner of th...
MySQL scheduled task example tutorial
Preface Since MySQL 5.1.6, a very unique feature ...
CSS code abbreviation div+css layout code abbreviation specification
Using abbreviations can help reduce the size of yo...
How to deploy python crawler scripts on Linux and set up scheduled tasks
Last year, due to project needs, I wrote a crawle...