ios计算机器代码,JS实现苹果计算器

本文实例为大家分享了JS实现苹果计算器的具体代码，供大家参考，具体内容如下

手机

#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;

}

0

AC

←

%

/

7

8

9

*

4

5

6

-

1

2

3

+

0

.

=

var span = document.querySelector(".sp");

/**

* @param {Object} num

* 点击数字键盘 将数字替换到我们的span标签内部

*/

function fun(num){

var value = span.innerText;

if(value == 0){

span.innerText = num;

}else{

span.innerText = span.innerText.concat(num);

}

}

/**

* 计算结果的

*/

function compute(){

var value = span.innerText;

var result= eval(value);

span.innerText = result;

}

/**

* 清空计算区域 重置为0

*/

function clearCompute(){

span.innerText="0";

}

/**

* 删除计算区域的最后一个字符

*/

function deleteLastNum(){

var value = span.innerText;

console.log(typeof(value))

if(value == 0){

}

else{

/**

* value是一个字符串

* zs123

* 字节：文本在计算器底层存储的时候都是字节存储的 编码集 将字符转成特定的字节在计算机上存储的

* 字符：人类能看懂的一个字母 或者一个中文汉字

* a b 中 国 aj

*

* 字符串就是一个一个字符组成的一个集合体 字符串String提供了很多常用的方法 以便我们对这个字符数组进行相关操作

*/

if(value.length!=1){

span.innerText = value.substring(0,value.length-1)

}else{

span.innerText="0";

}

}

}

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。