因为觉得segment fault的markdown界面比CSDN漂亮一些，所以最近正在把博客迁移到这边来，这几天多发了两篇.....
作为一个学习中练手的小demo，选了一个计算器。原因大概只是因为早就想做，比较简单，又确实有很多地方不太清楚，所以选了这个玩意，其实看网上的许多源码，做起来不是很难，但是我还是写了差不多一个礼拜，每天中午午休的一个小时加上下班后的1个小时，星期天也弄了差不都一天，终于基本把整体的功能都完成了，后期我想再迭代优化一下，加上一些CSS3的动画和响应式的功能，让这个小demo可以在手机上跑起来。不过这都是后话了。
废话不多说，上代码吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在线计算器</title>
<style>
*{
margin: 0;
padding: 0;
color: #fff;
font-family: "微软雅黑";
}
.content{
width: 280px;
height: 510px;
margin: 0 auto;
background: #000;
}
.bar {
height: 20px;
width: 100%;
padding-top: 4px;
box-sizing: border-box;
}
.bar .close{
width: 12px;
height: 12px;
border-radius: 50%;
background: red;
text-align: center;
line-height: 10px;
float: right;
color: red;
font-size: 10px;
margin-right: 4px;
cursor: pointer;
}
.bar .close:hover{
color: #fff;
}
.screen{
width: 260px;
margin-left:10px;
line-height: 140px;
text-align: right;
height: 140px;
font-size: 40px;
font-weight: lighter;
overflow: hidden;
}
.btn{
width: 70px;
height: 70px;
background: #ddd;
font-size: 24px;
text-align: center;
line-height: 70px;
float: left;
box-sizing: border-box;
border: 1px solid #000;
cursor: pointer;
}
.btn:nth-of-type(1),
.btn:nth-of-type(2),
.btn:nth-of-type(3){
background: #bbb;
}
.btn:nth-of-type(4n){
background: #ffb51c;
}
.btn:nth-of-type(17){
width: 140px;
}
.btn:nth-of-type(19){
background: #ffb51c;
}
</style>
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="content">
<div class="bar">
<div class=close>x</div>
</div>
<div class="screen"></div>
<div class="btn_con">
<div class="btn btn_reset">AC</div>
<div class="btn btn_negtive">+/-</div>
<div class="btn btn_delete">←</div>
<div class="btn btn_divided calcu">÷</div>
<div class="btn num">7</div>
<div class="btn num">8</div>
<div class="btn num">9</div>
<div class="btn btn_multiplied calcu">×</div>
<div class="btn num">4</div>
<div class="btn num">5</div>
<div class="btn num">6</div>
<div class="btn btn_minus calcu">-</div>
<div class="btn num">1</div>
<div class="btn num">2</div>
<div class="btn num">3</div>
<div class="btn btn_plus calcu">+</div>
<div class="btn num">0</div>
<div class="btn num">.</div>
<div class="btn btn_equal">=</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var src_show =$(".screen"); //屏幕显示
src_show.html("0");
var result ="", //输出结果
result_1="", //第一个数字
result_2 = ""; //第二个数字
var change=0; //运算符
var num = $(".num"); //数字键
var equal = $(".btn_equal"); //等于符
var calcu = $(".calcu"); //运算符
var reset = $(".btn_reset"); //清零符
var negtive = $(".btn_negtive"), //负号符
neg=1;
var del = $(".btn_delete"); //退格符
//负号操作
negtive.click(function(){
if(src_show.text()=="0"){ //当屏幕显示为0时
src_show.html("-0");
neg=0;
}else if(src_show.text()=="-0"){
src_show.html("0");
neg=1;
}else{ //当屏幕显示不为0
result=src_show.text();
if(neg==0){ //显示为负数时
neg=1;
}else if(neg==1){ //显示为正数时
neg=0;
}
result=-result;
src_show.html(result);
}
})
//数字键
num.click(function(){
result+=$(this).text();
if(neg==0){
src_show.html(-result);
}else{
src_show.html(result);
}
})
//四则运算操作
calcu.click(function(){
result_1=parseFloat(src_show.text());
if($(this).hasClass("btn_plus")){
change=1;
}
if($(this).hasClass("btn_minus")){
change=2;
}
if($(this).hasClass("btn_multiplied")){
change=3;
}
if($(this).hasClass("btn_divided")){
change=4;
}
result="";
src_show.html("0");
neg=1;
});
//等于操作
equal.click(function(){
if(result==""){
result_1=parseFloat(src_show.text());
}else{
result_2 = parseFloat(src_show.text());
}
if(change ==1){
result = result_1+result_2;
}
if(change ==2){
result = result_1-result_2;
}
if(change ==3){
result = result_1*result_2;
}
if(change ==4){
result = result_1/result_2;
}
src_show.html(result);
if(result<0){
neg=0;
}else{
neg=1;
}
result="";
});
//清零符
reset.click(function(){
src_show.html("0");
result ="";
result_1="";
result_2 = "";
change=0;
neg=1;
});
//退格符
del.click(function(){
if(result.length==1||result==""){ //输入一位数退格
result="";
if(neg==1){
src_show.html("0");
}else if(neg==0){
src_show.html("-0");
}
}else{
result=result.substr(0,result.length-1);
if(neg==1){
src_show.html(result);
}else if(neg==0){
src_show.html(-result);
}
}
})
})
</script>
</body>
</html>代码知识点
因为主要用了JQ的代码，所以知识点主要是JQ的。
1.substr（start，length）：选取一个字符串的指定长度的字符。
start为必须参数，是字符串开始位置的index值，length非必须，指定字符串的长度。这个方法会返回指定的字符串。
2.hasClass（className）：检查元素是否含有指定的类名。
className不需要带“.”。常用if判断；例：
`if($(this).hasClass("btn_plus")){
change=1;
}`
3.其他的代码十分常用，也没有必要一一列出了。
实现原理
由于在网上看的代码太长，理解够呛，所以这个demo基本上是笔者自己的创作，其中某些思想有借鉴网络，但主要的实现皆为本人。
原理是将数字存储为字符串result，按运算符（+-*/）的时候存储字符串result为第一个数字result_1，同时根据按的不同的运算符，赋给变量change不同的值；并且把result清空以便保存第二个字符串。再输入完第二段字符串时，把它再次赋给result，当按等于符的时候，把result赋给result_2；同时，根据change值的不同，进行不同的运算，得出结果，显示在屏幕上。
其中用了大量的if判断，以至于层层叠叠，我都怕会出什么问题......
最后附上我的github地址，如果你觉得对你有帮助的话，请尽情地用fork和star来“羞辱”我吧！
问题
说不上来问题在哪，感觉代码写得太乱，有点随机应变的感觉，没有很好地做到事先规划，有一种头疼医头脚疼医脚的感觉。
1.在处理负号符的时候，导致了result的值有时是字符串，有时又是数字，我的初衷是在处理字符本身的时候始终以字符串的形式存在，当要调整正负和运算的时候再变成数字，可是由于后期的代码变得冗长，导致我自己越来越糊涂，只能应付了事。
2.迭代。我本来希望能在一个礼拜做成一个能在手机使用的小应用，但是由于时间的计划不太合理，前期的基本功能用了太久才完成。后面我想完善起来，结合响应式，这应该不难。
PS：代码经过初步测试，能正常使用。大神发现有什么bug的，欢迎拍砖指点。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。