因为以为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的，迎接拍砖指导。
