第二次作业

操作题：

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

如图1

先创建一个ersan的文件夹，创建4个页面文件：ersan.js、ersan.json、ersan.wxml、ersan.wxss。

ersan.wxml的代码如下：

<view class='er' wx:for="{{[1,2,3,4,5,6,7,8,9]}}"
wx:for-item="er">
  <view class='san' wx:for="{{[1,2,3,4,5,6,7,8,9]}}"
wx:for-item="san"  wx:if="{{er<=san}}">
      {{er}}*{{san}}={{er*san}}
  </view>
</view>

ersan.wxss的代码如下：

.er{
  display: flex;/*元素会成为弹性容器*/
  font-size: 9px; /*字体大小为9个像素*/
}
.er .san{
  width: 40px;/*宽为40像素*/
}

运行结果如下：

第一题结束。Zz

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

创建一个名为ersi的文件夹，创建4个页面文件：ersi.js、ersi.json、ersi.wxml、ersi.wxss。

ersi.js的代码如下：

// 定义一个函数，用于检查一个数是否是水仙花数  
function isNarcissistic(num) {  
  // 确保是3位数  
  if (num < 100 || num > 999) {  
      return false;  
  }  
    
  // 将数字转换为字符串，然后分别取出每一位  
  let strNum = num.toString();  
  let digit1 = parseInt(strNum[0]);  
  let digit2 = parseInt(strNum[1]);  
  let digit3 = parseInt(strNum[2]);  
    
  // 计算各位数字的3次幂之和  
  let sumOfCubes = Math.pow(digit1, 3) + Math.pow(digit2, 3) + Math.pow(digit3, 3);  
    
  // 检查和是否等于原数  
  return sumOfCubes === num;  
}  

// 遍历100到999之间的所有数字，找出水仙花数并打印  
for (let i = 100; i <= 999; i++) {  
  if (isNarcissistic(i)) {  
      console.log("水仙花数"+ i); // 在Console控制台输出水仙花数  
  }  
}

运行结果如图

ZZzz

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

ersi.js的代码如下：

Page({  
  data: {  
    narcissisticNumbers: [] // 用于存储水仙花数的数组  
  },  
  onLoad: function() {  
    this.findNarcissisticNumbers();  
  },  
    
  findNarcissisticNumbers: function() {  
    let narcissisticNumbers = []; // 创建一个空数组来存储水仙花数  
      
    // 遍历100到999之间的所有数字  
    for (let i = 100; i <= 999; i++) {  
      if (this.isNarcissistic(i)) {  
        narcissisticNumbers.push(i); // 如果是水仙花数，则添加到数组中  
      }  
    }  
      
    // 将水仙花数数组设置到页面的data中，以便渲染到页面上  
    this.setData({  
      narcissisticNumbers: narcissisticNumbers  
    });  
  },  
    
  // 定义一个函数，用于检查一个数是否是水仙花数  
  isNarcissistic: function(num) {  
    let strNum = num.toString();  
    let sumOfCubes = 0;  
    for (let i = 0; i < strNum.length; i++) {  
      sumOfCubes += Math.pow(parseInt(strNum[i]), 3);  
    }  
    return sumOfCubes === num;  
  }  
});

ersi.wxml的代码如下：

<view>水仙花数共有：{{narcissisticNumbers}}</view>

运行结果如下：

ZZZzzz

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

创建一个名为erwu的文件夹，创建4个页面文件：erwu.js、erwu.json、erwu.wxml、erwu.wxss。

erwu.wxml的代码：

<view class="diamond-container">  
  <!-- 上半部分菱形 -->  
  <view class="diamond-row" wx:for="{{diamondSize}}" wx:key="index">  
    <view class="diamond-space" wx:for="{{diamondSize - index - 1}}" wx:key="space"></view>  
    <text class="diamond-item" wx:for="{{2 * index + 1}}" wx:key="item">*</text>  
  </view>  
  <!-- 下半部分菱形 -->  
  <view class="diamond-row" wx:for="{{diamondSize - 1}}" wx:key="index" wx:for-index="revIndex" style="margin-top: -{{diamondItemSize/2}}px;">  
    <text class="diamond-item" wx:for="{{2 * (diamondSize - revIndex - 2) + 1}}" wx:key="item">*</text>  
  </view>  
</view>

erwu.wxss的代码：

/* index.wxss */  
.diamond-container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100vh; /* 占据整个视口高度 */  
}  
.diamond-row {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  
.diamond-item {  
  font-size: 20px; /* 菱形内部字符的大小 */  
  color: black; /* 菱形内部字符的颜色 */  
  margin: 0 5px; /* 每个字符之间的间距 */  
}  
.diamond-space {  
  flex-grow: 1; /* 使空格占据剩余空间，保证菱形居中 */  
}

erwu.js的代码：

// index.js  
Page({  
  data: {  
    diamondSize: 5 // 菱形的大小，决定菱形的行数以及每行的“角”数  
  }  
  // ... 其他页面逻辑 ...  
});

运行结果：

ZZZZzzzz