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
How to allow all hosts to access mysql
1. Change the Host field value of a record in the...
MySQL fuzzy query statement collection
SQL fuzzy query statement The general fuzzy state...
Solve the problem of MySQL 8.0 still prompting Access denied even though the input is correct
I started learning MySQL recently. The installati...
Detailed explanation of CSS3 media query responsive layout bootstrap framework principle practice (recommended)
Detailed description of media device type usage: ...
MySql quick insert tens of millions of large data examples
In the field of data analysis, database is our go...
VMware Workstation installation Linux system
From getting started to becoming a novice, the Li...
Let's learn about MySQL database
Table of contents 1. What is a database? 2. Class...
Control the vertical center of the text in the HTML text box through CSS
When the height attribute of Text is defined, the ...
Specific use of CSS content attribute
The content attribute is generally used in the ::...
React dva implementation code
Table of contents dva Using dva Implementing DVA ...
Add ?v= version number after js or css to prevent browser caching
Copy code The code is as follows: <span style=...
Teach you step by step to develop a brick-breaking game with vue3
Preface I wrote a few examples using vue3, and I ...
A complete record of a Mysql deadlock troubleshooting process
Preface The database deadlocks I encountered befo...
The ultimate solution for playing background music in Firefox browser (Chrome multi-browser compatible)
The recommended code for playing background music ...
Win32 MySQL 5.7.27 installation and configuration method graphic tutorial
The installation tutorial of MySQL 5.7.27 is reco...