第二章作业

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

js文件

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

 json文件

{
  "usingComponents": {
  }
}

wxss文件

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

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>
 

运行结果

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

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);
  },
})

json文件

{
  "usingComponents": {
  }
}

 wxml文件

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

wxss文件

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}

.nickname-label {
  width: 105px;
}

.nickname-input {
  flex: 1;
}

运行结果

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

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);
  },
})

 wxml文件

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

wsxx文件

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}

.nickname-label {
  width: 105px;
}

.nickname-input {
  flex: 1;
}

运行结果

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;
}

 运行结果