微信小程序学习（第二章作业）

一、利用 wx:if及 wx:for 数据绑定来实现输出乘法口诀表(图2-21)的编程

在page文件夹下新建一个文件夹，在创建所需文件

在zy2.js文件中输入以下代码

Page({
  data:{
    arr:[1,2,3,4,5,6,7,8,9]
  }
})

在app.json文件里加以下代码：

"pages/zy2/zy2",

在zy2.json文件里只需要输入一个大括号

在zy2.wxml文件中输入以下代码：

<view class="txw" wx:for="{{arr}}" wx:for-item="i"><!--wx:for-item="i"重新指定当前项的变量名-->
  <view class="t" wx:for="{{arr}}" wx:for-item="j">
    <view wx:if="{{i>=j}}">
      {{i}}×{{j}}={{i*j}}
    </view>
  </view>
</view>

在zy2.wxss文件中输入以下代码：

.txw{
  margin-top: 50px;
}
.t{
  display: inline-block;
}

效果：

二、编写程序，在 Console 控制台输出水仙花数(水仙花数是指一个3位数的各位上的数字的3次暴之和等于它本身。例如，1³+5³+3³=153)

在zy3.js文件输入以下代码：

Page({ 
data:{
  txw: []
},
onLoad: function () {
  this.findNarcissisticNumbers();
},
  findNarcissisticNumbers: function (){ 
     const numb =[];
      for (let i=100;i<1000;i++){
        const a = Math.floor(i / 100);
       const b = Math.floor((i % 100) / 10); const c=i% 10;
       if (a ** 3 + b** 3 +c**3===i){ 
         numb.push(i);
       }
      }
     this.setData({txw: numb});
     console.log(numb);
  }
});

在zy3.wxml文件输入以下代码：

<view class="txw">
  <view class="t">
    <text wx:for="{{txw}}" wx:key="*this">
      {{item}}
    </text>
  </view>
</view>

在zy3.wxss文件中输入以下代码：

.txw { 
  display: flex;
  align-items: center;
  justify-content: center;
   height: 80vh;
}
.t text{
  display: block;
}

运行效果：

三、编写程序，在页面中输出水仙花数

在zy33.js文件输入以下代码：

Page({ 
  data:{
  txw: []
},
onLoad: function () {
  this.findNarcissisticNumbers();
},
  findNarcissisticNumbers: function (){ 
     const numb =[];
      for (let i=100;i<1000;i++){
        const a = Math.floor(i / 100);
       const b = Math.floor((i % 100) / 10); const c=i% 10;
       if (a ** 3 + b** 3 +c**3===i){ 
         numb.push(i);
       }
      }
     this.setData({txw: numb});
  }
});

在zy33.wxml文件输入以下代码：

<view class="txw">
  <view class="t">
    <text wx:for="{{txw}}" wx:key="*this">
      {{item}}
    </text>
  </view>
</view>

在zy33.wxss文件中输入以下代码：

.txw { 
  display: flex;
  align-items: center;
  justify-content: center;
   height: 80vh;
}
.t text{
  display: block;
}

运行效果：

四、编写程序，在页面中输出菱形图案

在zy4.wxml中输入以下代码：

<view class="txw">
<view>菱形</view>
<view>    *</view>
<view>   ***</view>
<view>  *****</view>
<view> *******</view>
<view>*********</view>
<view>*********</view>
<view> *******</view>
<view>  *****</view>
<view>   ***</view>
<view>    *</view>
</view>

在zy4.wxss中输入以下代码：

.txw{
  text-align: center;
}

运行效果：