本文主要是实现了基础计算器,如加、减、乘、除、百分比、正负等,逻辑比较简单,不一一展开。目前仅实现了逻辑,按钮效果等就暂时不实现了。
效果如下:
主要代码如下:
<!doctype html>
<html>
<head>
<style>
.container{
background-color: black;
color:white;
}
.gray{
background-color: gray;
color:black;
}
.yellow{
background-color: yellow;
color:black;
}
.black{
background-color: blue;
color:white;
}
.result{
height: 40px;
line-height: 40px;
padding-top: 60px;
padding-right: 40px;
padding-bottom: 10px;
text-align: right;
}
.button1,.button2{
padding:2%;
width:17%;
margin:2%;
height:17%;
border-radius: 100px;
float:left;