Implementing a web calculator with native JavaScript
|
This article shares the specific code of JavaScript to implement the web version of the calculator for your reference. The specific content is as follows Because I was bored and looked through the system software on my computer, I came across the calculator function, so I will simply write about the functions of this calculator. This web version of the calculator has all the basic functions, but it is not very complete, so it is for reference only.
First, if you don't want to write the style of the web calculator by hand, you can just copy it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cal {
width: 420px;
margin: 100px auto;
background-color: #E6E6E6;
padding: 2px;
overflow: hidden;
}
.show {
position: relative;
width: 416px;
height: 120px;
font-size: 50px;
line-height: 50px;
font-weight: 700;
}
.show button {
display: none;
position: absolute;
top: -2px;
right: -2px;
width: 60px;
height: 40px;
line-height: 40px;
text-align: center;
border: transparent;
background-color: #E6E6E6;
font-size: 30px;
font-weight: 100;
cursor: pointer;
}
.show button:hover {
background-color: #e81123;
color: #f0f0f0
}
.res,
.left,
.right {
position: absolute;
bottom: 0;
height: 60px;
line-height: 60px;
padding: 0 3px;
}
.res {
right: 0;
/* width: 100%; */
text-align: right;
}
.left {
display: none;
background-color: #E6E6E6;
}
.right {
display: none;
right: 0;
background-color: #E6E6E6;
}
.left:hover,
.right:hover {
color: #2e8eda;
}
.keyboard {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btn {
display: flex;
justify-content: center;
width: 100px;
height: 60px;
line-height: 60px;
margin: 2px;
background-color: #f0f0f0;
border: transparent;
font-size: large;
}
.btn:hover {
background-color: #d6d6d6;
}
.digital {
background-color: #fafafa;
font-weight: 700;
}
.equal {
background-color: #8abae0;
}
.equal:hover {
background-color: #4599db;
}
</style>
</head>
<body>
<div class="cal">
<div class="show">
<button class="close">×</button>
<div class="res">0</div>
<div class="left"><</div>
<div class="right">></div>
</div>
<div class="keyboard">
<!-- 0 -->
<button class="btn percent">%</button>
<!-- 1 -->
<button class="btn clearOne">CE</button>
<!-- 2 -->
<button class="btn clearAll">C</button>
<!-- 3 -->
<button class="btn back">del</button>
<!-- 4 -->
<button class="btn div1">1/x</button>
<!-- 5 -->
<button class="btn square">x²</button>
<!-- 6 -->
<button class="btn sqrt">²√x</button>
<!-- 7 -->
<button class="btn div">÷</button>
<!-- 8 -->
<button class="btn digital">7</button>
<!-- 9 -->
<button class="btn digital">8</button>
<!-- 10 -->
<button class="btn digital">9</button>
<!-- 11 -->
<button class="btn mul">x</button>
<!-- 12 -->
<button class="btn digital">4</button>
<!-- 13 -->
<button class="btn digital">5</button>
<!-- 14 -->
<button class="btn digital">6</button>
<!-- 15 -->
<button class="btn sub">-</button>
<!-- 16 -->
<button class="btn digital">1</button>
<!-- 17 -->
<button class="btn digital">2</button>
<!-- 18 -->
<button class="btn digital">3</button>
<!-- 19 -->
<button class="btn add">+</button>
<!-- 20 -->
<button class="btn neg">+/-</button>
<!-- 21 -->
<button class="btn digital">0</button>
<!-- 22 -->
<button class="btn digital">.</button>
<!-- 23 -->
<button class="btn equal">=</button>
</div>
</div>
<script src="./computer.js"></script>
</body>
</html>js part:
const bt = document.querySelectorAll('.keyboard button')
const close = document.querySelector('.close')
const res = document.querySelector('.res')
//When the number is clicked, let k = 0
let one
let two
function arr(num) {
bt[num].onclick = function () {
res.innerText += bt[num].innerText
res.innerText = parseFloat(res.innerText)
// console.log(one)
}
}
//Decimal point //Keep the result decimal function fn() {
if (res.innerText.length > 8) {
res.innerText = res.innerText.slice(0, 10)
}
if (res.innerText == 'NaN') {
res.innerText = 0
}
}
//When the operator is clicked, function symbol(str, fu) {
bt[str].onclick = function () {
k++
if (k > 1) {
return
}
one = parseFloat(res.innerText)
// switch (fu) {
// case '+':
// one += one
// break;
// case '-':
// one -= one
// break;
// case '*':
// one *= one
// break;
// case '/':
// one /= one
// break;
// }
res.innerText = ''
close.style.display = 'block'
close.innerText = bt[str].innerText
console.log(one)
}
}
arr(21)
arr(18)
arr(17)
arr(16)
arr(14)
arr(13)
arr(12)
arr(10)
arr(9)
arr(8)
arr(22)
//Operation symbol symbol(0)
symbol(7, '/')
symbol(11, '*')
symbol(15, '-')
symbol(19, '+')
console.log(bt[22].innerText)
bt[22].onclick = function () {
res.innerText += bt[22].innerText
console.log(565)
}
bt[23].onclick = function () {
two = parseFloat(res.innerText)
switch (close.innerText) {
case '%':
// toFixed(11) retains 11 decimal places res.innerText = one % two
k = 0
break;
case '+':
res.innerText = one + two
k = 0
break;
case '-':
res.innerText = one - two
k = 0
break;
case 'x':
res.innerText = one * two
k = 0
break;
case '÷':
res.innerText = one / two
k = 0
break;
}
// console.log(res.innerText.length)
fn()
}
bt[1].onclick = function () {
res.innerText = ''
}
bt[2].onclick = function () {
res.innerText = '0'
close.innerText = 'x'
close.style.display = ''
one = 0
two = 0
}
bt[3].onclick = function () {
res.innerText = res.innerText.slice(0, res.innerText.length - 1)
if (res.innerText.length === 0) {
res.innerText = '0'
return
}
}
bt[4].onclick = function () {
res.innerText = 1 / parseFloat(res.innerText)
fn()
}
bt[5].onclick = function () {
res.innerText = parseFloat(res.innerText) * parseFloat(res.innerText)
fn()
}
bt[6].onclick = function () {
res.innerText = Math.sqrt(parseFloat(res.innerText))
fn()
}
bt[20].onclick = function () {
res.innerText = 0 - parseFloat(res.innerText)
fn()
}The above code makes a simple computer. 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:
|
>>: Detailed analysis of MySQL 8.0 memory consumption
Recommend
CenOS6.7 mysql 8.0.22 installation and configuration method graphic tutorial
CenOS6.7 installs MySQL8.0.22 (recommended collec...
GET POST Differences
1. Get is used to obtain data from the server, wh...
A brief discussion on two current limiting methods in Nginx
The load is generally estimated during system des...
Explanation of the steps for Tomcat to support https access
How to make tomcat support https access step: (1)...
vue+springboot realizes login function
This article example shares the specific code of ...
Use nginx to configure domain name-based virtual hosts
1. What is a virtual host? Virtual hosts use spec...
Summary of MySQL's commonly used SQL statements for creating tables, adding fields, modifying fields, and adding indexes
This article uses examples to describe the common...
Using front-end HTML+CSS+JS to develop a simple TODOLIST function (notepad)
Table of contents 1. Brief Introduction 2. Run sc...
Docker MQTT installation and use tutorial
Introduction to MQTT MQTT (Message Queuing Teleme...
In-depth analysis of the reason why the error "The server quit without updating PID file" is reported when MySQL is started
Many people have encountered this error when star...
How to simulate network packet loss and delay in Linux
netem and tc: netem is a network simulation modul...
Solution to MySQL error code 1862 your password has expired
The blogger hasn't used MySQL for a month or ...
In html, set the scroll bar to automatically display when the content in the div exceeds
In HTML pages, we sometimes need to automatically ...
Solution to nginx hiding version number and WEB server information
Nginx can not only hide version information, but ...
The relationship between JS constructor and instantiation and prototype introduction
Table of contents 1. Constructor and instantiatio...