微信小程序第二章作业

1. 利用 wx:if 及 wx:for 数据绑定来实现输出乘法口诀表

 代码如下：

.wxml代码

<view class= "one">
<view class="two">乘法口诀</view>
  <block wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="line">
    <view class="three">
      <block wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="col">
        <block wx:if="{{col>=line}}">
          <view class="four">
            {{line}}*{{col}}={{line*col}}
          </view>
        </block>
      </block>
    </view>
  </block>
</view>
 

.wxss代码

 
.one{
  width: 100%;
  height: 100vh;
}
.two{
  margin-top: 65px;
  text-align: center;
  margin-bottom: 20px;
}
.three{
  width: 100%;
  height: 5%;
  display: flex;
}
.four{
  width: 10%;
  height: 100%;
  font-size: 10px;
}

运行结果如图

2. 编写程序，在Console控制台输出水仙花数（水仙花数是指一个3位数的各位上的数字的3次幂之和等于它本身。）

代码如下：

.js代码

Page({
  data: {
    narcissisticNumbers: []
  },
 
  onLoad: function () {
    this.findNarcissisticNumbers();
  },
 
  findNarcissisticNumbers: function () {
    for (let i = 100; i < 1000; i++) {
      let digits = i.toString().split('');
      let sum = 0;
      for (let digit of digits) {
        sum += Math.pow(parseInt(digit), 3);
      }
      if (sum === i) {
        this.data.narcissisticNumbers.push(i);
      }
    }
    this.setData({
      narcissisticNumbers: this.data.narcissisticNumbers
    });
  }
});

 .wxml代码

<view class="container">
  <view class="narcissistic-numbers">
    <text wx:for="{{narcissisticNumbers}}" wx:key="index">{{item}}</text>
  </view>
</view>

运行结果如图

 3. 编写程序，在页面中输出水仙花花数。

代码如下：

.js代码

Page({
  
});

.wxml代码

<view class="one">
  <view class="two">水仙花数</view>
  <view class="three">
    <text class="three">水仙花数共有：153，370，371，407</text>
  </view>
</view>

.wxss代码

/* pages/news3/news3.wxss */
.two{
  padding-top: 65px;
  text-align: center;
  margin-bottom: 50px;
  font-weight: bold;
}
.three{
  text-align: center;
  padding-bottom: 280px;
  display: block;
}

运行结果如图

4. 编写程序，在页面中输出菱形图案。

代码如下：

 .js代码

Page({
  data: {
    diamondRows: [], // 存储菱形每一行的数组
  },
 
  onLoad: function () {
    const size = 5; // 菱形的大小（行数）
    const diamond = this.generateDiamond(size);
    this.setData({
      diamondRows: diamond
    });
  },
 
  generateDiamond: function (size) {
    const diamond = [];
    const spaces = (size - 1) * 2; // 计算空格数量
 
    // 生成上半部分菱形
    for (let i = 0; i < size; i++) {
      const row = [];
      // 添加前导空格
      for (let j = 0; j < spaces - i; j++) {
        row.push('');
      }
      // 添加星号
      for (let k = 0; k < 2 * i + 1; k++) {
        row.push('*');
      }
      diamond.push(row);
    }
 
    for (let i = size - 1; i >= 0; i--) {
      const row = [];
      // 添加前导空格
      for (let j = 0; j < spaces - i; j++) {
        row.push('');
      }
      // 添加星号
      for (let k = 0; k < 2 * i + 1; k++) {
        row.push('*');
      }
      diamond.push(row);
    }
 
    return diamond;
  }
});

 .wxml代码

<view class="one">
  <view wx:for="{{diamondRows}}" wx:key="index" class="two">
    <text wx:for="{{item}}" wx:key="innerIndex">{{item}}</text>
  </view>
</view>

.wxss代码

.one {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 使容器占满视窗高度 */
}
 
.two {
  display: flex;
  justify-content: center;
}
 
.two text {
  margin: 0 2px; /* 调整星号之间的间距 */
}

运行结果如图