第二章课后习题

一、乘法表

     利用wx:if 及 wx:for 数据绑定来实现输出乘法口诀表。如下图所示。

    

在 zlfw.wxml中写以下代码进行数据绑定

<view class='tuh'>
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
    <view style='display:inline-block;width:100px' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
      <view wx:if="{{j<=i}}">
        {{i}}*{{j}}={{i*j}}
      </view>
    </view>
  </view>
</view>

运行结果：因为没有在wxss中进行设置字体大小等所以运行出以下效果 

二、水仙花数

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

在.js文件中运用for循环、和if语句等进行对代码的编写，代码如下

Page({
onLoad: function () {
      // 输出水仙花数并显示在调试台上
      this.outputDaffodilNumbers();
    },
   
    outputDaffodilNumbers: function () {
      console.log("水仙花数:");
   
      // 范围
      for (let i = 100; i < 1000; i++) {
        
        let kit = i % 10;
        let hjen = Math.floor(i / 10) % 10;
        let kiud = Math.floor(i / 100);
   
        // 判断
        if (Math.pow(kit, 3) + Math.pow(hjen, 3) + Math.pow(kiud, 3) === i) {
          console.log(i);
        }
      }
    },
})

运行结果

 

2.编写程序，在页面中输出水仙花数。如下图所示

 在er.ts的data中创建jhggf数组并进行if语句和程序初始，代码如下：

 data:{
    jhggf: []
  },
    onLoad: function () {
    this.findNarcissisticNumbers();
  },
    findNarcissisticNumbers: function (){ 
      const numbers =[];
    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){ 
      numbers.push(i);
    }
    }
    this.setData({
      jhggf: numbers});
    }

 在er.wxml中进行数据绑定：

<!--pages/er/er.wxml-->
<view class="kj">
<view class="nd">水仙花数：
<text wx:for="{{jhggf}}" wx:key="*this">{{item}},</text></view>
</view>

运行结果

 

 虽然有错误，但是最后不影响运行结果就行。

三、菱形

编写程序，在页面中输出菱形图案。如下图所示

先在zlfw.js的data中创建数据，代码如下：

 data: {
    lA:['*','***','*****','*******','*********',
'**********','*********','*******','*****','***','*']

  },

在zlfw.wxml中进行数据绑定，代码如下：

<view class="linn">
  
<block wx:for="{{lA}}"wx:for-item="item"
wx:for-ff="ff"><text class="lingxin-item">{{item}}</text></block></view>

需要在zlfw.wxss中进行效果调整，代码如下：

.linn{
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

运行结果：