• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

强力推荐微信小程序之简易计算器,很适合小白程序员

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

原文链接:https://mp.weixin.qq.com/s/gYF7GjTRpeZNoKPAPI9aXA

1

概述


前几日QQ群里的朋友问我有没有计算器小程序案例,今天我们说下小程序计算器然后就分享这样的小案例。希望对大家有所帮助


不多说了,二当家要上图来啦!

快去拿个小板凳,坐等更多更新

注意:如若需要请联系微信geekxz



2

wxml




<view class="content">
 <view class="layout-top">
   <view class="screen">
    {{screenData}}
   </view>
 </view>
 <view class="layout-bottom">
   <view class="btnGroup">
     <view class="item orange" bindtap="clickBtn" id="{{idc}}">С</view>
     <view class="item orange" bindtap="clickBtn" id="{{idb}}"></view>
     <!--<view class="item orange" bindtap="clickBtn" id="{{idt}}">+/-</view>-->
     <view class="item orange iconBtn" bindtap="history">
         <icon type="{{iconType}}" color="{{iconColor}}" class="icon" size="25"/>
     </view>
     <view class="item orange" bindtap="clickBtn" id="{{idadd}}"></view>
   </view>
   <view class="btnGroup">
     <view class="item blue" bindtap="clickBtn" id="{{id9}}">9</view>
     <view class="item blue" bindtap="clickBtn" id="{{id8}}">8</view>
     <view class="item blue" bindtap="clickBtn" id="{{id7}}">7</view>
     <view class="item orange" bindtap="clickBtn" id="{{idj}}"></view>
   </view>
   <view class="btnGroup">
     <view class="item blue" bindtap="clickBtn" id="{{id6}}">6</view>
     <view class="item blue" bindtap="clickBtn" id="{{id5}}">5</view>
     <view class="item blue" bindtap="clickBtn" id="{{id4}}">4</view>
     <view class="item orange" bindtap="clickBtn" id="{{idx}}">×</view>
   </view>
   <view class="btnGroup">
     <view class="item blue" bindtap="clickBtn" id="{{id3}}">3</view>
     <view class="item blue" bindtap="clickBtn" id="{{id2}}">2</view>
     <view class="item blue" bindtap="clickBtn" id="{{id1}}">1</view>
     <view class="item orange" bindtap="clickBtn" id="{{iddiv}}">÷</view>
   </view>
   <view class="btnGroup">
     <view class="item blue zero" bindtap="clickBtn" id="{{id0}}">0</view>
     <view class="item blue" bindtap="clickBtn" id="{{idd}}">.</view>
     <view class="item orange" bindtap="clickBtn" id="{{ide}}"></view>
   </view>
 </view>
</view>




3

  js




Page({
 data:{
   idb:"back",
   idc:"clear",
   idt:"toggle",
   idadd:"+",
   id9:"9",
   id8:"8",
   id7:"7",
   idj:"-",
   id6:"6",
   id5:"5",
   id4:"4",
   idx:"×",
   id3:"3",
   id2:"2",
   id1:"1",
   iddiv:"÷",
   id0:"0",
   idd:".",
   ide:"=",
   screenData:"0",
   operaSymbo:{"+":"+","-":"-","×":"*","÷":"/",".":"."},
   lastIsOperaSymbo:false,
   iconType:\'waiting_circle\',
   iconColor:\'white\',
   arr:[],
   logs:[]
 },
 onLoad:function(options){
   // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
   // 页面渲染完成
 },
 onShow:function(){
   // 页面显示
 },
 onHide:function(){
   // 页面隐藏
 },
 onUnload:function(){
   // 页面关闭
 },
 clickBtn:function(event){
   var id = event.target.id;
   if(id == this.data.idb){  //退格←
     var data = this.data.screenData;
     if(data == "0"){
         return;
     }
     data = data.substring(0,data.length-1);
     if(data == "" || data == "-"){
         data = 0;
     }
     this.setData({"screenData":data});
     this.data.arr.pop();
   }else if(id == this.data.idc){  //清屏C
     this.setData({"screenData":"0"});
     this.data.arr.length = 0;
   }else if(id == this.data.idt){  //正负号+/-
     var data = this.data.screenData;
     if(data == "0"){
         return;
     }
     var firstWord = data.charAt(0);
     if(data == "-"){
       data = data.substr(1);
       this.data.arr.shift();
     }else{
       data = "-" + data;
       this.data.arr.unshift("-");
     }
     this.setData({"screenData":data});
   }else if(id == this.data.ide){  //等于=
     var data = this.data.screenData;
     if(data == "0"){
         return;
     }
     //eval是js中window的一个方法,而微信页面的脚本逻辑在是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能再脚本中使用window,也无法在脚本中操作组件                
     //var result = eval(newData);          
     var lastWord = data.charAt(data.length);
     if(isNaN(lastWord)){
       return;
     }
     var num = "";
     var lastOperator = "";
     var arr = this.data.arr;
     var optarr = [];
     for(var i in arr){
       if(isNaN(arr[i]) == false || arr[i] == this.data.idd || arr[i] == this.data.idt){
         num += arr[i];
       }else{
         lastOperator = arr[i];
         optarr.push(num);
         optarr.push(arr[i]);
         num = "";
       }
     }
     optarr.push(Number(num));
     var result = Number(optarr[0])*1.0;
     console.log(result);
     for(var i=1; i<optarr.length; i++){
       if(isNaN(optarr[i])){
           if(optarr[1] == this.data.idadd){
               result += Number(optarr[i + 1]);
           }else if(optarr[1] == this.data.idj){
               result -= Number(optarr[i + 1]);
           }else if(optarr[1] == this.data.idx){
               result *= Number(optarr[i + 1]);
           }else if(optarr[1] == this.data.iddiv){
               result /= Number(optarr[i + 1]);
           }
       }
     }
     //存储历史记录
     this.data.logs.push(data +\'=\'+ result);
     wx.setStorageSync("calclogs",this.data.logs);
     this.data.arr.length = 0;
     this.data.arr.push(result);
     this.setData({"screenData":result+""});
   }else{
     if(this.data.operaSymbo[id]){ //如果是符号+-*/
       if(this.data.lastIsOperaSymbo || this.data.screenData == "0"){
         return;
       }
     }
     var sd = this.data.screenData;
     var data;
     if(sd == 0){
       data = id;
     }else{
       data = sd + id;
     }
     this.setData({"screenData":data});
     this.data.arr.push(id);
     if(this.data.operaSymbo[id]){
       this.setData({"lastIsOperaSymbo":true});
     }else{
       this.setData({"lastIsOperaSymbo":false});
     }
   }
 },
 history:function(){
   wx.navigateTo({
     url:\'../history/history\'
   })
 }
})




4   css




.content {
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: #ccc;
   font-family: "Microsoft YaHei";
   overflow-x: hidden;
}
.layout-top{
   width: 100%;
   margin-bottom: 30rpx;
}
.layout-bottom{
   width: 100%;
}
.screen {
   text-align: right;
   width: 100%;
   line-height: 260rpx;
   padding: 0 10rpx;
   font-weight: bold;
   font-size: 60px;
   box-sizing: border-box;
   border-top: 1px solid #fff;
}
.btnGroup {
   display: flex;
   flex-direction: row;
   flex: 1;
   width: 100%;
   height: 5rem;
   background-color: #fff;
}
.item {
   width:25%;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   margin-top: 1px;
   margin-right: 1px;
}
.item:active {
   background-color: #ff0000;
}
.zero{
   width: 50%;
}
.orange {
   color: #fef4e9;
   background: #f78d1d;
   font-weight: bold;
}
.blue {
   color:#d9eef7;
   background-color: #0095cd;
}
.iconBtn{
   display: flex;
}
.icon{
  display: flex;
  align-items: center;
  width:100%;
  justify-content: center;
}


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
星宿小程序置顶文章不正常显示的解决办法发布时间:2022-07-18
下一篇:
微信小程序项目笔记以及openId体验版获取问题发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap