js实现简单计算器_javascript技巧

来源：浪柱娱乐

参考部分资料，编写一个简单的计算器案例，虽然完成了正常需求，但是也有不满之处，待后续实力提升后再来补充，先把不足之处列出：

　　1：本来打算只要打开页面，计算器的输入框会显示一个默认为0的状态，但是在输入框加入默认显示为0的时候，选择数据输入时，该0会显示输入数字的前面，例如”0123“，由于能力有限，待后续实力提升再来补充完善！

　　2：目前只能实现鼠标控制选择按钮，待完善键盘录入功能。

　　3：乘法的那个符号在本来想改成”×“这个符号的，待后续完善。

　　附图片一张：

　　html部分：




 
 计算器



 
 简单的计算器
 @liumobai v1.0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 欢迎使用JavaScript计算器
 
 反馈

　　JS部分：

　　CSS部分：　

/*Basic reset*/
*{
 margin:0;
 padding:0;
 box-sizing: border-box;
 font: 14px Arial,sans-serif;
}
html{
 height:100%;
 background-color:lightslategrey;
}

#calculator{
 margin: 15px auto;
 width:330px;
 height:400px;
 border: 1px solid lightgray;
 background-color:darkgrey;
 padding:15px;
}

/*LOGO*/
.LOGO{
 height:20px;

}
.LOGO .name{
 float:left;
 line-height:30px;
}
.LOGO .verson{
 float:right;
 line-height:30px;
}
/*screen*/
#shuRu{
 margin-top:15px;
}
.screen{
 margin-top:5px;
 width:300px;
 height:40px;
 text-align: right;
 padding-right:10px;
 font-size:20px;
}
#keys{
 border:1px solid lightgray;
 height:223px;
 margin-top:25px;
 padding:8px;
}
#keys .last{
 margin-right:0px;
}
.footer{
 margin-top:20px;
 height:20px;
}
.footer .link{
 float:right;
}

#keys .buttons{
 float:left;
 width: 42px;
 height: 36px;
 text-align:center;
 background-color:lightgray;
 margin: 0 17px 20px 0;
}

接下来再给大家分享一则实例



 Untitled

显示全文

全部频道

js实现简单计算器_javascript技巧