第二章作业

一、创建九九乘法表

1、在微信小程序pages中创建一个页面文件

/app.json
{
"pages":[
"pages/aa/aa",
"pages/index/index"
]
}

在aa.js中输入 

// pages/aa/aa.ts
Page({

  
})

在aa.json 中输入

{
 "navigationBarBackgroundColor": "#ffffff",
 "navigationBarTitleText": "九九乘法表",
 "navigationBarTextStyle":"white",
 "backgroundTextStyle":"dark"
}

在aa.wxml中输入

<!--pages/aa/aa.wxml-->
<!--九九乘法表-->
<view class='con'>
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
<view class='inline' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
<view wx:if="{{j<=i}}">
{{i}}*{{j}}={{i*j}}
</view>
</view>
</view>
</view>

 在aa.wxss中输入

/* pages/aa/aa.wxss */
.con{
  display: flex;
  font-size: 10px;
  justify-self: start;
}

最后运行结果为

二、如何输出菱形图案 

如上先创建一个名为bb的页面文件

在bb.js中输入

// pages/bb/bb.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
nihaoArray:['*','***','*****','*******','*********','*********','*******','*****','***','*']
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

在bb.json中输入

{
  "usingComponents": {}
}

 在bb.wxml中输入

<!--pages/bb/bb.wxml-->
<view class="nihao">
<block wx:for="{{nihaoArray}}" wx:for-item="item" wx:for-bb="bb">
<text class="nihao-item">{{item}}</text></block></view>

 在bb.wxss中输入

/* pages/bb/bb.wxss */
.nihao{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.diamond-item{
  font-size: 10px;
}

运行结果如下

 

三、如何在页面中输出水仙花数 

如上先创建一个名为kk的页面文件

在kk.wxml中输入

<!--pages/kk/kk.wxml-->
<text> 水仙花数一共有</text>
<view class="container">
<view class="narcissistic-numbers">
<text wx:for="{{narcissisticnumbers}}" wx:key="*this">{{item}}
</text>
</view>
</view>

 在kk.wxss中输入

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

在kk.js中输入

// pages/kk/kk.ts
Page({
  data: {
narcissisticNumbers:[]
  },
onLoad:function(){
  this.findNarcissisticNumbers();
},
findNarcissisticNumbers:function (){
  const numbers=[];
  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){
      numbers.push(i);}}
      this.setData({
        narcissisticNumbers:numbers
      });
    }
  });

在kk.json中输入

{
"navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle":"white",
  "backgroundTextStyle":"dark"

}

运行结果如下

四、 编写程序，在Console 控制台输出水仙花数(水仙花数是指一个3位数的各位上的数字的3次幂之和等于它本身

如上先创建一个名为tt的页面文件

在kk.wxml中输入

<!--pages/tt/tt.wxml-->
<text>水仙花数为</text>
<view class="App">
<view class="app">
  <text wx:for="{{message}}" wx:key="*this">{{item}}</text>
</view>
</view>

在kk.js中输入

// pages/tt/tt.ts
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);
  },
})

运行结果如下