zoukankan      html  css  js  c++  java
  • 强力推荐微信小程序之简易计算器,很适合小白程序员

    原文链接: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;
    }


    以上代码为效果图


    文末福利:

    福利一:前端,Java,产品经理,微信小程序,Python等100G资源合集大放送:jianshu.com/p/e8197d4d9

    福利二:微信小程序入门与实战全套详细视频教程。


    【领取方法】

    关注 【编程微刊】微信公众号:

    回复【小程序demo】一键领取130个微信小程序源码demo资源。

    回复【领取资源】一键领取前端,Java,产品经理,微信小程序,Python等资源合集100G资源大放送。


  • 相关阅读:
    119. Pascal's Triangle II
    118. Pascal's Triangle
    112. Path Sum
    111. Minimum Depth of Binary Tree
    110. Balanced Binary Tree
    108. Convert Sorted Array to Binary Search Tree
    88. Merge Sorted Array
    83. Remove Duplicates from Sorted List
    70. Climbing Stairs
    陌陌面试经历
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701516.html
Copyright © 2011-2022 走看看