第三章作业（微信小程序）

麦

已于 2024-03-31 12:24:41 修改

阅读量328

点赞数 7

文章标签：微信小程序 notepad++ 小程序

于 2024-03-17 14:42:36 首次发布

本文链接：https://blog.csdn.net/2302_76619477/article/details/136780753

版权

简易计算器

效果图：

代码如下：

//.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>

//.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;
}

//.json
{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "简易计算器",
  "navigationBarTextStyle": "black",
  "usingComponents": {}
}

//.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,
    });
  }
});

分析页面结构实现布局效果

代码如下:

//.wxml
<view class="qiao">
  <view class="buju"style="padding:8px">
    <view class="one">行业趋势指南   ∨</view>
    <view class="two">年度趋势指南   ∨</view>
  </view>
</view>
<view class="w" style="border: 1px solid #ccc"></view>
<ul >
  <li>最新发布</li>
  <li>单品</li>
  <li>色彩</li>
  <li>风格</li>
  <li>细节</li>
  <li>面料</li>
</ul>
<view>
  <view class="zp">
    <image src="../images/xiong1.png" mode=""/>
  </view>
  <view class="zp">
    <image src="../images/xiong2.png" mode=""/>
  </view> 
  <view class="zp">
    <image src="../images/xiong3.png" mode=""/>
  </view>
  <view class="zp">
    <image src="../images/xiong4.png" mode=""/>
  </view>
  <view class="zp">
    <image src="../images/xiong5.png" mode=""/>
  </view>
  <view class="zp">
    <image src="../images/xiong6.png" mode=""/>
  </view>
</view>

//.json
{
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTitleText": "趋势",
  "navigationBarTextStyle": "white",
  "backgroundTextStyle": "dark"
}

//.wxss
.su{
  height: 100%;
}
.buju,.neirong{
  display: flex;
  justify-content:space-around;
}
.mm{
  display: flex;
  flex-direction: row;
}
.yans{
  display: flex;
  flex-direction: row;
}
.qiao{
  height: 100%;
}
.buju{
  display: flex;
  justify-content:space-around;
}
.buju view{
  float: left;
  width: 160px;
  height: 30px;
  font-size: 15px;
  padding-top: 7px;
  text-align: center;
 
}
ul{
  display: block;
  height: 30px;
  margin-left: 50px;
}
ul li{
  font-size: 10px;
  display: block;
  width: 40px;
  float: left;
  text-align: center;
  height: 30px;
  margin-top: 10px;
 
}
ul li:hover{
  background-color: burlywood;
}
.zp image{
  float: left;
  display: block;
  margin-left: 40px;
  margin-top: 15px;
  width: 100px; 
  height: 100px;
}

运行效果图：