微信小程序第二章作业

1、利用wx：if及wx：for数据绑定来实现输出乘法口诀表的编程

运行效果：

wxml代码：

九九乘法表
<view class="row" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="row">
<view class="col" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="col" wx:if="{{col>=row}}">
<view class="kg">{{row}}*{{col}}={{col*row}}</view>
</view>
</view>

wxss代码：

 .row {
display: flex;
/* 弹性布局 */
font-size: 10px;
/* 字体大小 */
margin-top: 10px;
/* 上边距 */
}
.row.col{
width: 45px;
/* 列宽 */
}
.kg{
 margin-right: 12px;
 /* 右外边距 */
}

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

运行效果：

js代码：

 onLoad: function() {
    this.findNarcissusNumbers();//页面加载时调用的函数
  },
  findNarcissusNumbers: function() {
     console.log("水仙花数：")//打印文字
    for (let i = 100; i <= 999; i++) {//进行遍历所有的3位数
      if (this.isNarcissisticNumber(i)) {
        //利用isNarcissisticNumber函数来对比，符合就进行打印
        console.log(i);
      }
    }
  },
  isNarcissisticNumber: function(num) {//判断水仙花数的函数方法
    const numStr = num.toString();
    const len = numStr.length;
    const sum = numStr.split('').reduce((sum, digit) => sum + Math.pow(digit, len), 0);
    //进行数字的拆分、累加，在进行次幂计算，然后再进行对比
    return sum === num;
  }, 

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

运行结果：

wxml代码：

<view>
{{narcissisticNumbers}}
</view>

js代码：

 data:{
   
      narcissisticNumbers: [], 
    }],
    result: ''
},

// 在页面输出水仙花数：
  onLoad: function () {
    this.calculateNarcissisticNumbers(); 
    // 在页面加载时调用 calculateNarcissisticNumbers 函数计算水仙花数
  },
  isNarcissisticNumber: function(num) {//判断水仙花数的函数方法
    let sum = 0;
    const strNum = num.toString();
    const len = strNum.length;
    for (let i = 0; i < len; i++) {
      sum += Math.pow(parseInt(strNum.charAt(i)), len);
    }
    return sum === num;
  },

  // 计算所有三位数的水仙花数
  calculateNarcissisticNumbers: function() {
    const narcissisticNumbers = [];//将对比的进行保存在数组
    for (let i = 100; i < 1000; i++) {
      if (this.isNarcissisticNumber(i)) {
        narcissisticNumbers.push(i);//保存到页面进行输出
      }
    }
    this.setData({
      narcissisticNumbers: narcissisticNumbers // 将计算出的水仙花数保存到数据对象中
    });
  },

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

运行效果：

wxml代码：

<view class="lingxing">
<text>{{emo}}</text>
</view>

wxss代码：

.lingxing{
text-align: center;
/* 居中 */
}

js代码:

 data:{
   
      emo:'',
    }],
    result: ''
},
onLoad:function(){
   this.printDiamond(5);
  //  调用函数，打印一个五行的菱形
 },
 printDiamond:function(n){
  //  n是行数
   let diaString='';
  //  定义一个一个空格
   for (let w = 0; w < n; w++) {
     for (let j = 0; j < n-w-1; j++) {
       diaString+='';
       
     }
     for (let j = 0; j < 2*w+1;j++) {
diaString+='*';
   }
   diaString+='\n';
  }
  //  开始下半部分的菱形
 for (let w = n-2; w >=0; w--) {
   for(let j = 0;j<n-w-1;j++){
     diaString+='';
   }
   for(let j=0;j<2*w+1;j++){
     diaString+='*';
   }
   diaString +='\n';
 }
 this.setData({
   emo:diaString
  //  绑定数据进行保存
 });
 }