第二章作业

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

index.wxml代码如下：

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

index.wxss代码如下：

.a{
  display: flex;
  font-size: 10px; 
}
.a .b{
  width: 50px;
}

 运行结果：

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

index.wxml代码如下：

<view>水仙花的判断</view>
<input placeholder="请输入三位数"bindinput="inputChange"/>
<view bindtap="checkNumber">验证</view>
<view>{{result}}</view>

 index.js代码如下：

Page({
  data:{
    result:''
  },
 inputChange(e){
  this.setData({
    number: e.detail.value
    })
 },
  checkNumber(){
    const number=this.data.number;
    if(number.length!==3){
      this.setData({
        result:'请输入三位数'
      })
      return;
    }
    const digit1=parseInt(number.charAt(0));
    const digit2=parseInt(number.charAt(1));
    const digit3=parseInt(number.charAt(2));
    const sum=Math.pow(digit1,3)+Math.pow(digit2,3)+Math.pow(digit3,3);
    if(sum ===parseInt(number)){
      this.setData({
        result:'是水仙花数'
      })
    }else{
      this.setData({
        result:'不是是水仙花数'
      })
    }
  }
})

运行截图：

 

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

index.js代码如下：

Page({
  data:{
    narcissisticNumbers:[]
  },
  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({
      narcissisticNumbers:numbers
    });
  }
})

index.wxml代码如下：

<view>水仙花数共有：
<text wx:for="{{narcissisticNumbers}}"wx:key="*this">{{item}}</text>
</view>

 运行截图：

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

index.wxml代码如下：

<view class="box">
  <view>    *</view>
  <view>   ***</view>
  <view>  *****</view>
  <view> *******</view>
  <view>*********</view>
  <view> *******</view>
  <view>  *****</view>
  <view>   ***</view>
  <view>    *</view>
</view>

index.wxss代码如下：

.box{
  text-align: center;
  margin-top: 30px;
  font-size: 26px;
}

运行结果：