第二章作业

操作题

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

index.js：

Page({
  data: {
    logs: [],
    array:[1,2,3,4,5,6,7,8,9]
  },
  onLoad() {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
  }
})

index.wxml：

<view id="center">
  乘法口诀表
</view> 
  <view class="border" >
    <view wx:for="{{array}}" wx:for-item="i">
      <view class="inline" wx:for="{{array}}" wx:for-item="j">
        <view class="size" wx:if="{{i>=j}}">
          {{j}}*{{i}}={{i*j}}
        </view>
      </view>
    </view>
  </view>

index.wxss

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}
.inline{
  display:inline-block;
}
.size{
  font-size: 10px;
  padding-right:1em;
}
.border{
  border: 1px solid skyblue;
}
#center{
  font-weight: 700;
  text-align: center;
}

运行结果：

 

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

 index.js

Page({    
onLoad: function () {  
    for (let i = 100; i < 1000; i++) {  
      let digits = i.toString().split('');  
      let sum = 0;  
      for (let digit of digits) {  
        sum += Math.pow(parseInt(digit), 3);  
      }  
      if (sum === i) {  
        console.log(i);  
      }  
    }  
  }
  });

运行结果：

  

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

index.js:

Page({  
    data: {  
      narcissisticNumbers: [] 
    },  
    onLoad: function () {  
      for (let i = 100; i < 1000; i++) {  
        let digits = i.toString().split('');  
        let sum = 0;  
        for (let digit of digits) {  
          sum += Math.pow(parseInt(digit), 3);  
        }  
        if (sum === i) {   
          this.data.narcissisticNumbers.push(i);  
        }  
      }   
      this.setData({  
        narcissisticNumbers: this.data.narcissisticNumbers  
      });  
    }  
  });

index.wxml:

<view class="container">  
  <view class="narcissistic-numbers">  
    <text wx:for="{{narcissisticNumbers}}" wx:key="index">水仙花数：{{item}}</text>  
  </view>  
</view>

index.wxss: 

.container {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    height: 100%;  
  }  
    
  .narcissistic-numbers {  
    margin-top: 20px;  
  }  
    
  .narcissistic-numbers text {  
    display: block;  
    margin-bottom: 10px;  
  }

运行结果：

 4.在页面输出棱形图案

在页面中输出菱形图案

index.js:

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

index.wxml:

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

index.wxss:

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

 运行结果：