第二章作业

.js

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

.wxml

<view class="t1" wx:for="{{arr}}" wx:for-item="i">
  <view class="t2" wx:for="{{arr}}" wx:for-item="j">
    <view class="size" wx:if="{{i>=j}}">
      {{i}}×{{j}}={{i*j}}
    </view>
  </view>
</view>

.wxss

.t1{
  margin: 10px;
}
.size{
  padding-right:1em;
}
.t2{
  display: inline-block;
}

 运行结果：

2、编写程序，在Console控制台输出水仙花数。

.js

Page({ 
  data:{
    txw: []
  },
  onLoad: function () {
    this.findNarcissisticNumbers();
  },
    findNarcissisticNumbers: function (){ 
       const numb =[];
        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){ 
           numb.push(i);
         }
        }
       this.setData({txw: numb});
       console.log(numb);
    }
  });

.wxml

<view class="t1">
  <view class="t2">
    <text wx:for="{{txw}}" wx:key="*this">
      {{item}}
    </text>
  </view>
</view>

.wxss

.t1 { 
  display: flex;
  align-items: center;
  justify-content: center;
   height: 80vh;
}
.t2 text{
  display: block;
}

运行结果：

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

.js

Page({ 
  data:{
    txw: []
  },
  onLoad: function () {
    this.findNarcissisticNumbers();
  },
    findNarcissisticNumbers: function (){ 
       const numb =[];
        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){ 
           numb.push(i);
         }
        }
       this.setData({txw: numb});
    }
  });

.wxml

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

.wxss

.t { 
  display: flex;
 
  justify-content: flex-start;
}
view{
  display: block;
  margin: 10px;
}

运行结果：

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

.js

Page({
  data: {
    diamondArray: ['   *   ', 
                   '  ***  ',
                   ' ***** ',
                   '*******', 
                   ' ***** ', 
                   '  ***  ', 
                   '   *   ']
  }
})

.wxml

<view class="diamond">
  <text>菱形图案</text>
  <block wx:for="{{diamondArray}}" wx:for-item="item" wx:for-index="index">
  
    <text class="diamond-item">{{item}}</text>
  </block>
</view>

.wxss

.diamond {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}
 
.diamond-item {
  font-size: 20px;
  margin-bottom: 10px;
}

运行结果：