2021

admin管理员组

文章数量:1516870

2021

程序参考GitHub/wxapp-sCalc-master 效果如图

calc.wxss,calc.wxml,calc.js.内容如下 由于手机编写博客 屏幕太小 不好处理排班  讲究看吧！走了些许弯路 很多都是逻辑方面问题，组件布局也是从零学起 希望你对初学者有所帮助 少走弯路 一起学习

/* pages/Calc/Calc.wxss */
.container{height: 100%;display:flex;flex-direction:column;/*align-items: center;*/background-color: #fff;font-family:"Arial";overflow: hidden;
}.layout-top{width: 100%;/*height: 40%;*/border:2rpx solid #000099;/* margin-bottom: 10rpx;*/background-color:#e9c26a;
}
.layout-bottom{width: 100%;height: 60%;
}
.screen{width: 100%;height: 300rpx;text-align:right;max-inline-size: 15;white-space: pre-wrap;/*line-height: 20rpx;*/padding: 0 10rpx;margin:2rpx 5rpx 10rpx;overflow:visible;font-size: 17pt;font-weight:Medium;color:BW_0_Alpha_0.9;box-sizing: border-box;border:2px solid #5b6dcd;
}
.screenres{width:100%;height: 4%;line-height: normal;text-align: right;margin-bottom: 2rpx;font-size: 17pt;font-weight:bolder;box-sizing: border-box; border:2rpx dashed #ff0000 ;
}.btnGroup{display: flex;flex-direction: row;flex:1;width:100%;height:4rem;background-color: #fff;
}
.btnOrange{color: #fef4fe;background-color: #fe8dfe;font-weight:bold;  }.btnBlue{columns: #d9eef7;background-color: #0095fd;}.btnYellow{color:#d9eef7;background-color:rgb(114, 175, 137);}.item{width:25%;display:flex;align-items: center;flex-direction:column;justify-content: center;margin-top: 2%;margin-right: 2%;}.item:active{background-color: #93db70;}

<view class="container" ><view class="layout-top"><view class="screen">{{screenData}}</view><view class="screenres">{{screenResult}}</view></view><view class="layout-bottom"><view class="btnGroup"><view class="item btnOrange" id="{{btnClear}}" bindtap="clickBtn">C</view><view class="item btnOrange" id="{{btnAbs}}" bindtap="clickBtn">＋/－</view><view class="item btnOrange" id="{{btnBack}}" bindtap="clickBtn">＜—</view><view class="item btnYellow" id="{{btnDivision}}" bindtap="clickBtn">÷</view></view><view class="btnGroup"><view class="item btnBlue" id="{{btn7}}" bindtap="clickBtn">7</view><view class="item btnBlue" id="{{btn8}}" bindtap="clickBtn">8</view><view class="item btnBlue" id="{{btn9}}" bindtap="clickBtn">9</view><view class="item btnYellow" id="{{btnMultiply}}" bindtap="clickBtn">x</view></view><view class="btnGroup"><view class="item btnBlue" id="{{btn4}}" bindtap="clickBtn">4</view><view class="item btnBlue" id="{{btn5}}" bindtap="clickBtn">5</view><view class="item btnBlue" id="{{btn6}}" bindtap="clickBtn">6</view><view class="item btnYellow" id="{{btnSubtraction}}" bindtap="clickBtn">-</view></view><view class="btnGroup"><view class="item btnBlue" id="{{btn1}}" bindtap="clickBtn">1</view><view class="item btnBlue" id="{{btn2}}" bindtap="clickBtn">2</view><view class="item btnBlue" id="{{btn3}}" bindtap="clickBtn">3</view><view class="item btnYellow" id="{{btnPlus}}" bindtap="clickBtn">+</view></view><view class="btnGroup"><view class="item btnOrange" id="{{btnHistory}}" bindtap="toHistory">⊙</view><view class="item btnBlue" id="{{btn0}}" bindtap="clickBtn">0</view><view class="item btnBlue" id="{{btnDecimal}}" bindtap="clickBtn">.</view><view class="item btnYellow" id="{{btnEqual}}" bindtap="clickBtn">=</view></view></view>
</view> 

const maxLength=18//设置记录中一行最多可以有18个字符 现在不知道组件的最大宽度如何设置 先人为设定
Page({data:{btnClear:"clear",btnBack:"back",btnDivision:"÷" ,btnAbs:"toggle",btnSubtraction:"-",btnMultiply:"*",btnPlus:"+",btnDecimal:".",btnHistory:"history",btnEqual:"=",btn0:"0",btn1:"1",btn2:"2",btn3:"3",btn4:"4",btn5:"5",btn6:"6",btn7:"7",btn8:"8",btn9:"9",screenData:"0",screenResult:"=",operationSymbol:[],//{'＋':'+',"－":"-","X":"*","÷":"/"},arr:[],lastOperationSymbol:"",lastisoperationSymbol:false},recordArr:[],onLoad:function(option){},onReady:function(){},onShow:function(){},onHide:function(){},clickBtn:function(event){//console.log("clickBtn in",event);var id = event.target.id;//console.log("id: ",this.data.btn9);var tmpdata=this.data.screenData;if(id==this.data.btnClear){//Clear  清空键this.setData({"screenData":"0"});this.setData({"screenResult":"="})this.data.arr=[];this.data.operationSymbol=[];this.data.lastOperationSymbol="";}else if(id==this.data.btnBack){if(tmpdata=="0") return;tmpdata=tmpdata.substring(0,tmpdata.length-1);this.setData({"screenData":tmpdata});//console.log(this.data.arr);//this.data.arr.pop();//console.log(this.data.arr);}else if(id==this.data.btnDecimal){//暂且保留，在正常输入时不会有逻辑错误，考虑输入有运算符后在输入的数字tmpdata=tmpdata+id;//console.log(tmpdata);this.setData({"screenData":tmpdata});}else if(id==this.data.btnAbs){//涉及到运算符 晚点再涉及运算逻辑if(tmpdata==0) return;var tmplastOperationSymbol=this.data.lastOperationSymbol;var tmpindex=tmpdata.lastIndexOf(tmplastOperationSymbol);var tmpscdata=tmpdata.substring(tmpindex+1);tmpscdata="-"+tmpscdata;// console.log(tmpdata.substring(0,tmpindex)); tmpdata=tmpdata.substring(0,tmpindex+1)+tmpscdata;this.setData({"screenData":tmpdata});}else if(id==this.data.btnPlus||id==this.data.btnSubtraction ||id==this.data.btnMultiply||id===this.data.btnDivision){var tmpindex,tmplastOperationSymbol=this.data.lastOperationSymbol;if(tmplastOperationSymbol==this.data.btnEqual){var tmpres=this.data.screenResult.substring(1);this.setData({"screenData":tmpres});tmplastOperationSymbol="";tmpdata=this.data.screenData;}if(tmpdata.length>maxLength && tmpdata.indexOf('\n')!=-1){//后面加入换行符"\n",会被当做正常字符占据位置 这里全部删除掉          var reg=new RegExp('\n','g');tmpdata=tmpdata.replace(reg,'');//console.log("delete wrap char",tmpdata);}if(tmplastOperationSymbol=="")tmpindex=-1;else  tmpindex=tmpdata.lastIndexOf(tmplastOperationSymbol);if(tmpindex==tmpdata.length-1&& tmpindex!=-1){     //重复按某个运算符或者连续按按运算符 都以最后一个显示tmpdata=tmpdata.substring(0,tmpdata.length-1);tmpdata=tmpdata+id;this.data.lastOperationSymbol=id;this.setData({"screenData":tmpdata});return;}var tmpdata1=tmpdata.substring(tmpindex+1);//console.log(tmpdata1);this.data.arr.push(tmpdata1);//修改screendatatmpdata=tmpdata+id;this.setData({"screenData":tmpdata});this.data.operationSymbol.push(id);this.data.lastOperationSymbol=id;}else if(id==this.data.btnEqual){//字符串转换成数值型数据if(tmpdata=="0") return;if(this.data.lastOperationSymbol==""){//一个数字没有运算符直接键等号tmpdata="="+tmpdata;this.setData({"screenData":tmpdata});return;}   if(this.data.lastOperationSymbol==this.data.btnEqual){tmpdata=this.data.screenResult.substring(1,this.data.screenResult.length);this.setData({"screenData":tmpdata,"screenResult":"="});//   this.setData({arr:[],operationSymbol:[]});this.data.arr.splice(0,this.data.arr.length);this.data.operationSymbol.splice(0,this.data.operationSymbol.length);return;}{ //键入等号 存入最后一段数字var tmplastOperationSymbol=this.data.lastOperationSymbol;var tmpindex=tmpdata.lastIndexOf(tmplastOperationSymbol);if(tmpindex!=tmpdata.length-1){var tmpdata1=tmpdata.substring(tmpindex+1);this.data.arr.push(tmpdata1);}}if(tmpdata.length>maxLength && tmpdata.indexOf('\n')!=-1){//后面加入换行符"\n",会被当做正常字符占据位置 这里全部删除掉          var reg=new RegExp('\n','g');tmpdata=tmpdata.replace(reg,'');//console.log("delete wrap char",tmpdata);}var num;{//由键入等号 开始对数组进行计算num=0;var tmparr=this.data.arr;var tmpoptarr=this.data.operationSymbol;if(tmparr.length-tmpoptarr.length !=1) return;//数据不对 不能构成表达式//console.log("equal: ",tmpdata);for(var i=0;i<tmpoptarr.length;i++){if(tmpoptarr[i]==this.data.btnMultiply){var tmpdata1 = Number(tmparr[i]) * Number(tmparr[i+1]);tmparr.splice(i,2,tmpdata1);//  console.log(tmparr);tmpoptarr.splice(i,1);i--;} if( tmpoptarr[i]==this.data.btnDivision){var tmpdata1=Number(tmparr[i]*1.0/Number(tmparr[i+1]));tmparr.splice(i,2,tmpdata1);tmpoptarr.splice(i,1);i--;}}//console.log("position1 data.arr:",this.data.arr);//console.log(this.data.operationSymbol);// 同级加减运算 num = Number(tmparr[0]);for(var i=0;i<tmpoptarr.length;i++){if(tmpoptarr[i]==this.data.btnPlus){num= num + Number(tmparr[i+1]);}if(tmpoptarr[i]==this.data.btnSubtraction){num= num-Number(tmparr[i+1]);}} this.data.arr.splice(0,this.data.arr.length);this.data.operationSymbol.splice(0,this.data.operationSymbol.length);//console.log("data.arr:",this.data.arr);//console.log(this.data.operationSymbol);}var tmpres ="="+num;//console.log(tmpres);this.setData({"screenData":tmpdata});this.setData({"screenResult":tmpres});//console.log("num",num);this.data.lastOperationSymbol=id;}else{{//检测除数不能为0var tmplastOperationSymbol=this.data.lastOperationSymbol;if(tmplastOperationSymbol==this.data.btnDivision && id==this.data.btn0){this.setData({"screenData":"除数不可以为0"});this.data.arr=[];return;}}if(tmpdata==0)tmpdata=id;elsetmpdata=tmpdata+id;{ //运算超过一行后 自动换行。if(tmpdata.length>maxLength){var tmpint=0;var tmpre=tmpdata.length%maxLength;tmpint=Math.floor(tmpdata.length/maxLength);//  console.log("tmpint: ",tmpint);//console.log("tmpre: ",tmpre);if(tmpdata.indexOf('\n')!=-1){//后面加入换行符"\n",会被当做正常字符占据位置 这里全部删除掉var reg=new RegExp('\n','g');tmpdata=tmpdata.replace(reg,'');//console.log("delete wrap char",tmpdata);}this.recordArr.splice(0,this.recordArr.length);//console.log("len:",tmpdata.length);//console.log(tmpdata);if(tmpint>0)for(var i=0;i<tmpint;i++){var tmpstr1 =tmpdata.substring(i*maxLength,(i+1)*maxLength);//  console.log(tmpstr1);this.recordArr.push(tmpdata.substring(i*maxLength,(i+1)*maxLength));this.setData({"screenData":this.recordArr.join('\n')});//console.log("pos1: ",this.recordArr);}if(tmpre>0){this.recordArr.push(tmpdata.substring(tmpint*maxLength,tmpdata.length));// console.log(tmpdata.substring(tmpint*maxLength,tmpdata.length));this.setData({"screenData":this.recordArr.join('\n')});        }//console.log(this.recordArr);return;}}this.setData({"screenData":tmpdata});}//console.log("clickBtn out");},toHistory:function(){}
})

本文标签： 2021