JS implementation of Apple calculator
|
This article example shares the specific code of JS to implement Apple calculator for your reference. The specific content is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mobile Phone</title>
<style type="text/css">
#phone{
position: relative;
width: 380px;
height: 700px;
box-shadow: 1px 1px 10px #808080;
margin: auto;
border-radius: 30px;
}
.kj{
position: absolute;
width: 8px;
height: 60px;
background-color: black;
right: -8px ;
top:100px;
}
.yl{
position: absolute;
width: 8px;
height: 80px;
background-color: black;
left: -8px;
top: 85px;
}
.top{
width: 120px;
height: 50px;
/* box-shadow: 1px 1px 10px #808080; */
margin: auto;
}
.mkf{
float: left;
width: 100px;
height: 10px;
border-radius: 5px;
background-color: black;
margin-right: 10px;
margin-top: 20px;
}
.sxj{
float: left;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: black;
margin-top: 20px;
}
.screen{
width: 370px ;
height: 600px;
background-color: black;
margin: auto;
}
.result-num{
height: 120px;
/* padding-top: 30px; */
}
.sp{
float: right;
color: white;
font-size: 50px;
margin-top: 50px;
}
.num{
height: 480px;
}
.key{
width: 82.5px;
height: 82.5px;
border-radius: 50px;
background-color: #808080;
float: left;
margin: 5px;
text-align: center;
line-height: 80px;
font-size: 20px;
color: white;
}
.first{
background-color: #B0B0B0;
color: black;
}
.second{
background-color: orange;
}
.third{
width: 175px;
}
.home{
width: 45px;
height: 45px;
border-radius: 25px;
background-color: #B0B0B0;
margin: 3px auto 0px auto;
}
</style>
</head>
<body>
<div id="phone">
<!--Power button-->
<div class="kj"></div>
<!--Volume-->
<div class="yl"></div>
<!-- Top of phone -->
<div class="top">
<!-- Microphone -->
<div class="mkf"></div>
<!-- Camera -->
<div class="sxj"></div>
</div>
<!-- Screen -->
<div class="screen">
<div class="result-num">
<span class="sp">0</span>
</div>
<div class="num">
<div class="key first" onclick="clearCompute()">AC</div>
<div class="key first" onclick="deleteLastNum()">←</div>
<div class="key first">%</div>
<div class="key second" onclick="fun('/')">/</div>
<div class="key keynum" onclick="fun(7)">7</div>
<div class="key keynum" onclick="fun(8)">8</div>
<div class="key keynum" onclick="fun(9)">9</div>
<div class="key second" onclick="fun('*')">*</div>
<div class="key keynum" onclick="fun(4)">4</div>
<div class="key keynum" onclick="fun(5)">5</div>
<div class="key keynum" onclick="fun(6)">6</div>
<div class="key second" onclick="fun('-')">-</div>
<div class="key keynum" onclick="fun(1)">1</div>
<div class="key keynum" onclick="fun(2)">2</div>
<div class="key keynum" onclick="fun(3)">3</div>
<div class="key second" onclick="fun('+')">+</div>
<div class="key third keynum" onclick="fun(0)">0</div>
<div class="key" onclick="fun('.')">.</div>
<div class="key second" onclick="compute()">=</div>
</div>
</div>
<!-- home button -->
<div class="home">
</div>
</div>
<script type="text/javascript">
var span = document.querySelector(".sp");
/**
* @param {Object} num
* Click the numeric keyboard to replace the number inside our span tag */
function fun(num){
var value = span.innerText;
if(value == 0){
span.innerText = num;
}else{
span.innerText = span.innerText.concat(num);
}
}
/**
* Calculation result */
function compute(){
var value = span.innerText;
var result = eval(value);
span.innerText = result;
}
/**
* Clear the calculation area and reset it to 0
*/
function clearCompute(){
span.innerText="0";
}
/**
* Delete the last character in the calculation area*/
function deleteLastNum(){
var value = span.innerText;
console.log(typeof(value))
if(value == 0){
}
else{
/**
* value is a string * zs123
* Byte: When text is stored in the computer, it is stored in bytes. The encoding set converts characters into specific bytes and stores them on the computer. * Character: A letter or a Chinese character that humans can understand. * ab Chinese aj
*
* A string is a collection of characters. String provides many common methods to enable us to perform related operations on this character array*/
if(value.length!=1){
span.innerText = value.substring(0,value.length-1)
}else{
span.innerText="0";
}
}
}
</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:
|
<<: Detailed explanation of bash command usage
>>: Detailed explanation of MySql automatic truncation example
Recommend
CSS uses position + margin to achieve the method of horizontal and vertical centering of fixed boxes
margin:auto; + position: absolute; up, down, left...
JavaScript flow control (branching)
Table of contents 1. Process Control 2. Sequentia...
MySQL 5.7.25 installation and configuration method graphic tutorial
There are two types of MySQL installation files, ...
Open the Windows server port (take port 8080 as an example)
What is a Port? The ports we usually refer to are...
Summary of naming conventions for HTML and CSS
CSS naming rules header: header Content: content/c...
Linux installation MySQL tutorial (binary distribution)
This tutorial shares the detailed steps of instal...
How to display web pages properly in various resolutions and browsers
The key codes are as follows: Copy code The code i...
GZIP compression Tomcat and improve web performance process diagram
1. Introduction I recently worked on a project an...
Detailed explanation of Deepin using docker to install mysql database
Query the MySQL source first docker search mysql ...
Example of implementing text wrapping in html (mixed text and images in html)
1. Text around the image If we use the normal one...
A brief understanding of MySQL SELECT execution order
The complete syntax of the SELECT statement is: (...
React implements paging effect
This article shares the specific code for React t...
Implementation and optimization of MySql subquery IN
Table of contents Why is IN slow? Which is faster...
MySQL 8.0.13 decompression version installation graphic tutorial under Windows
This article shares with you the MySQL 8.0.13 ins...
Detailed description of shallow copy and deep copy in js
Table of contents 1. js memory 2. Assignment 3. S...