第二章作业小程序

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

.js的代码

{
  "navigationBarBackgroundColor": "#94F521",
    "navigationBarTitleText": "乘法口诀表",
    "navigationBarTextStyle": "black",
    "BackgroundColor": "#ccc",
    "backgroundTextStyle": "light" 
}

.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}}">
{{row}}*{{col}}={{row*col}}
</view>
</view>

.wxss的代码

.row{
  display: flex;
  justify-content: flex-start; 
  font-size: 10px;
}
.row .col{
  width:45px;
}

效果图： 

 

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

.wxml的代码

<view class="SXH">
<view class="sxh">
  <text wx:for="{{message}}" wx:key="*this">{{item}}</text>
</view>
</view>

.js的代码

Page({
    data:{
      message: []
    },
      onLoad: function () {
      this.findmessage();
    },
      findmessage: function (){ 
        const num =[];
      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){ 
        num.push(i);}}
      this.setData({
      message: num});
      console.log("水仙花数："+num);
    },
})

效果图  

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

结合第二题对.wxml进行修改

<view class="SXH">
<view class="sxh">
 水仙花数共有:<text wx:for="{{message}}" wx:key="*this">{{item}},</text>
</view>
</view>

.json代码

{
  "navigationBarBackgroundColor": "#FFAEC9",
    "navigationBarTitleText": "水仙花数",
    "navigationBarTextStyle": "black",
    "BackgroundColor": "#ccc",
    "backgroundTextStyle": "light" 
}

效果图：

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

 .wxml的代码

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

.wxss的代码

.lingxing {
  text-align: center;
  margin-top: 20px;
  font-size: 20px;
}

效果图