【微信小程序】第二章 作业

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

先在 news.js 创建一个一到九的数组，代码：

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

然后，在 news.wxml 中创建两个 wx:for 循环 nen 中的数据，并把每次的数据分别赋给 i 和 j，再写个 wx:if 判断是否 i<=j ，是则输出 i 和 j 的乘积。代码：

<view wx:for="{{nen}}" wx:for-item="i" class="eew">
<view wx:for="{{nen}}" wx:for-item="j">
<view wx:if="{{i<=j}}">
{{i}}*{{j}}={{i*j}}
</view>
</view>
</view>

 最后，在 news.wxss 设置页面样式，代码：

.eew{
  font-size: 10px;
  float: left;
  margin-right: 6px;
  margin-bottom: 6px;
}

运行效果：

 

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

用 for 循环遍历100到1000以内的数，再创建三个储存百位、十位和个位数值的变量。其中Math.floor( ）函数是用来取整的。然后，使用Math.pow( ）函数来计算百位、十位和个位数的立方的和。最后，用 if 判断这个数是否为水仙花数。

代码（.js文件）：

Page({
  onLoad() {
    for (let i = 100; i < 1000; i++) {
      let baiwei = Math.floor(i / 100);
      let shiwei = Math.floor((i % 100) / 10);
      let gewei = i % 10;
      let he = Math.pow(baiwei, 3) + Math.pow(shiwei, 3) + Math.pow(gewei, 3);
      if (he === i) {
        console.log(i);
      }
    }
  }
});

运行效果：

 

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

第二题的基础上，添加一个数组来存放结果，再使用 setData( ）函数更新页面数据。

代码（.js）：

Page({
  onLoad() {
    let shuzu=[];
    for (let i = 100; i < 1000; i++) {
      let baiwei = Math.floor(i / 100);
      let shiwei = Math.floor((i % 100) / 10);
      let gewei = i % 10;
      let he = Math.pow(baiwei, 3) + Math.pow(shiwei, 3) + Math.pow(gewei, 3);
      if (he === i) {
        console.log(i);
        shuzu.push(i);
      }
    }
    this.setData({
      shuzu:shuzu
    })
  }
});

.wxml 

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

 运行效果：

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

代码：

.js

Page({
  data: {
    max: 9 //星号最大个数
  },
  onLoad(){
    let chucun=[];  //储存每行星号的个数
    let jisuan = Math.floor(this.data.max / 2);//确定空格数
    for (let i = 0; i < this.data.max; i++) {  //计算星号个数
      let kongge = Math.abs(jisuan - i);
      let xinghao = this.data.max - kongge * 2;
      let jieguo = ' '.repeat(kongge) + '*'.repeat(xinghao);//生成每行的星号
      chucun.push(jieguo);
  }
    this.setData({   //刷新页面，显示内容
      chucun: chucun
    });
  }
});

.wxml

<view wx:for="{{chucun}}" class="lingxing">
  {{item}}
</view>

.wxss

.lingxing{
  text-align: center;
}

运行效果：