小程序第三章作业

1.使用代码制作计算器

第一步 打开我们的微信开发工具，创建

第二步 创建文件夹zy1,目录.js、.json、.wxml、.wxss。

第三步 开始写简易计算器的界面，打开zy1目录下的zy1.wxml，在这里通过标签设置我们的界面，代码如下：

//zy1.wxml
<view class="screen">
  <view>{{result}}</view>
</view>
<view class="bottom">
  <view class="btngroup">
    <button id="{{id1}}" bindtap="clickButton" hover-class="shadow" class="btn-item gry">C</button>
    <button id="{{id2}}" bindtap="clickButton" hover-class="shadow" class="btn-item gry">←</button>
    <button id="{{id3}}" bindtap="clickButton" hover-class="shadow" class="btn-item gry">#</button>
    <button id="{{id4}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">/</button>
  </view>
 
  <view class="btngroup">
    <button id="{{id5}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">7</button>
    <button id="{{id6}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">8</button>
    <button id="{{id7}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">9</button>
    <button id="{{id8}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">*</button>
  </view>
 
  <view class="btngroup">
    <button id="{{id9}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">4</button>
    <button id="{{id10}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">5</button>
    <button id="{{id11}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">6</button>
    <button id="{{id12}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">-</button>
  </view>
 
  <view class="btngroup">
    <button id="{{id13}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">1</button>
    <button id="{{id14}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">2</button>
    <button id="{{id15}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">3</button>
    <button id="{{id16}}" bindtap="clickButton" hover-class="shadow" class="btn-item orange">+</button>
  </view>
 
  <view class="btngroup">
    <button id="{{id17}}" bindtap="clickButton" hover-class="shadow" class="btn-item zero white">0</button>
    <button id="{{id18}}" bindtap="clickButton" hover-class="shadow" class="btn-item white">.</button>
    <button id="{{id19}}" bindtap="equals" hover-class="shadow" class="btn-item orange">=</button>
  </view>
</view>

第四步 打开zy1目录下的zy1.wxss输入下面代码块中的命令对整个界面的布局进行调整

//zy1.wxss
page{
  background: #000;
}
.btngroup{
  display: flex;
  flex-direction: row;
}
.btn-item{
  width: 189rpx;
  text-align: center;
  line-height: 145rpx;
  border-radius: 0;
}
.zero{
  width: 376rpx;
}
.bottom{
  position: fixed;
  bottom: 0;
}
.white{
  background:#EFEFED;
}
.orange{
  background: #FC9504;
}
.gry{
  background: #CFCFCF;
}
.screen{
  position: fixed;
  bottom: 750rpx;
  word-wrap: break-word;
  width: 745rpx;
}
.screen view{
  color: #fff;
  font-size: 30px;
  text-align: right;
  margin-right: 30rpx;
}
icon{
  position: absolute;
  left: 55rpx;
  top:37rpx;
}
button::after{
  border-radius: 0;
}
.shadow{
  background: #999;
}

第五步 开始编写zy1目录下zy1.js代码

Page({
  data: {
    id1:"clear",
    id2:"back",
    id3:"history",
    id4:"div",
    id5:"num_7",
    id6:"num_8",
    id7:"num_9",
    id8:"mul",
    id9:"num_4",
    id10:"num_5",
    id11:"num_6",
    id12:"sub",
    id13:"num_1",
    id14:"num_2",
    id15:"num_3",
    id16:"add",
    id17:"num_0",
    id18:"dot",
    id19:"equals",
 
    result:"0",
    dotSign:false,
  },
  clickButton: function(e){
    console.log(e);
    var btnValue=e.target.id;
    var res=this.data.result;
    var newDotSign=this.data.dotSign;
    if(btnValue>="num_0"&&btnValue<="num_9"){
      console.log(btnValue.split('_'));
      var num=btnValue.split('_')[1];
      if (res == "0" || res.charAt(res.length - 1) == '∞'){
        res=num;
      }else{
        res=res+num;
      }
    }else{
      if (btnValue=="dot"){
        if(!newDotSign){
          res=res+'.';
          newDotSign=true;
        }
      }else if(btnValue=="clear"){
        res="0";
        newDotSign = false;
      }else if(btnValue=="back"){
        var length=res.length;
        if(length>1){
          res=res.substr(0,length-1);
        }else{
          res="0";
        }
      }else if(btnValue=="add"||btnValue=="sub"||btnValue=="mul"||btnValue=="div"){
        newDotSign=false;
        var sign;
        switch (btnValue){
          case "add":sign = "+"; break;
          case "sub":sign = "-"; break;
          case "mul":sign = "*"; break;
          case "div":sign = "/"; break;
        }
        if(!isNaN(res.charAt(res.length-1))){
          res = res + sign;
        }
      }
    }
 
    this.setData({
      result: res,
      dotSign:newDotSign,
    });
  },
  equals:function(){
    var str=this.data.result;
    var strArr=[];
    var item='';
    var temp=0;
    for(var i=0;i<=str.length;i++){
       var ch=str.charAt(i);
       if((ch!=''&&ch>=0&&ch<=9)||ch=="."){
         item=item+ch;
       }else{
         strArr[temp]=item;
         temp++;
         strArr[temp]=ch;
         temp++;
         item='';
       }
    }
    if (isNaN(strArr[strArr.length-1])){
      strArr.pop();
    }
    var res = parseInt(strArr[0]);
    var num;
    for(var i=1;i<strArr.length;i=i+2){
      if(res=="∞"){
        break;
      }
      num=strArr[i+1]*1;
      switch (strArr[i]){
        case '+': res = res + num; break;
        case '-': res = res - num; break;
        case '*': res = res * num; break;
        case '/':
        if(num!=0){
          res = res / num;
        }else{
          res="∞";
        }
        break;
      }
    }
    this.setData({
      result:"="+res,
    });
  }
});

第六步  补充zy1目录下的zy1.json文件

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "计算器",
  "navigationBarTextStyle": "black",
  "usingComponents": {}
}

运行结果：

2.页面布局效果