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
Use of Linux network configuration tools
This article introduces RHEL8 network services an...
10 skills that make front-end developers worth millions
The skills that front-end developers need to mast...
What is the function and writing order of the a tag pseudo class
The role of the a tag pseudo-class: ":link&qu...
An example of how Vue implements four-level navigation and verification code
Effect: First create five vue interfaces 1.home.v...
Detailed explanation of Vue's commonly used built-in instructions
<body> <div id="root"> <...
Nginx Location directive URI matching rules detailed summary
1. Introduction The location instruction is the c...
Detailed explanation of common commands for network configuration of containers in Docker
Basic network configuration Although Docker can &...
JS achieves five-star praise case
This article shares the specific code of JS to ac...
Summarize the common properties of BigIn functions in JavaScript
Table of contents 1. Overview 2. Attributes 1. Ma...
How to implement mask layer in HTML How to use mask layer in HTML
Using mask layers in web pages can prevent repeat...
How to add a pop-up bottom action button for element-ui's Select and Cascader
As shown in the figure below, it is a common desi...
Getting Started Tutorial for Beginners ⑨: How to Build a Portal Website
Moreover, an article website built with a blog pro...
Right align multiple elements in the same row under div in css
Method 1: float:right In addition, floating will ...
Detailed explanation of SRIOV pass-through configuration and performance testing based on KVM
SRIOV introduction, VF pass-through configuration...
How to deploy Rancher with Docker (no pitfalls)
Must read before operation: Note: If you want to ...