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": {}
}