第二章 微信小程序开发基础作业

操作题

第一题：

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

代码：

wxml文件中输入以下代码：

<text>乘法口诀</text>
<view wx:for="{{a}}" wx:for-item="i" class="i">
<view wx:for="{{a}}" wx:for-item="j" wx:if="{{i<=j}}" class="j">
{{i}}*{{j}}={{i*j}}
</view>
</view>

js文件中输入以下代码：

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

    },
})

wxss文件中输入以下代码：

text{
    margin-top: 50px;
    text-align: center;
}
.i{
    display: flex;
    font-size: 10px;
}
.i .j{
    width: 88rpx;
}

运行效果：

 

第二题： 

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

第一，在sxhs.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.join(',')});
            console.log("水仙花数："+num);
    },
})

 然后，在sxhs.wxml文件中输入以下代码：

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

运行效果：

 

第三题： 

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

第一，在上一个题目的基础上修改，js文件不用修改，在sxhs.wxml文件中输入以下代码：

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

第二，在sxhs.wxss文件中设置布局，输入以下代码：

.biaoti{
    margin-top: 30px;
    font-size: 20px;
    text-align: center;
}
.wen{
    margin-top: 10px;
    display: flex;
    text-align: center;
}

运行效果：

 

第四题： 

 4、编写程序，在页面中输出菱形图案，如下图所示。

在 lx.js文件中输入以下代码：

Page({
    data: {
      item: []
    },
    onLoad: function() { 
      var itemString = '';
      for (var a = 0; a < 7; a++) {
        for (var b = 0; b < 6-a; b++) {
            itemString += ' ';
        }
        for (var c = 0; c< 2 * a + 1; c++) {
            itemString += '*';
        }
        itemString += '\n';
      }
      for (var a = 5; a >= 0; a--) {
        for (var b = 0; b < 4; b++) {
            itemString += ' ';
        }
        for (var c = 0; c < 2 * a + 1; c++) {
            itemString += '*';
        }
        itemString += '\n';
      }
      this.setData({
        item: itemString
      });
    }
})

然后，在lx.wxml文件中输入以下代码：

<view class="bt"><text>菱形</text></view>
<view class="lx">
    <text>{{item}}</text>
</view>

 最后，在lx.wxss文件中输入下图代码，用于布局页面：

.bt{
    margin-top: 30px;
    text-align: center;
}
.lx{
    margin-top: 50px;
    text-align: center;
}

运行效果：