JS实现苹果计算器
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了JS实现苹果计算器的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手机</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;
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;
}
.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">
<!--开机键-->
<div class="kj"></div>
<!--音量-->
<div class="yl"></div>
<!-- 手机顶部 -->
<div class="top">
<!-- 麦克风 -->
<div class="mkf"></div>
<!-- 摄像头 -->
<div class="sxj"></div>
</div>
<!-- 屏幕 -->
<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键 -->
<div class="home">
</div>
</div>
<script type="text/javascript">
var span = document.querySelector(".sp");
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;
}
function clearCompute(){
span.innerText="0";
}
function deleteLastNum(){
var value = span.innerText;
console.log(typeof(value))
if(value == 0){
}
else{
if(value.length!=1){
span.innerText = value.substring(0,value.length-1)
}else{
span.innerText="0";
}
}
}
</script>
</body>
</html>效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
