第二章作业：用微信小程序实现-CSDN博客

本文链接：https://blog.csdn.net/2301_76863229/article/details/136599556

实现九九乘法口诀表：

<!--pages/nine/nine.wxml-->
<view  wx:for="{{arr}}"wx:for-item="i">
<view  style="display: inline-block; "  wx:for="{{arr}}" wx:for-item="j">
<view wx:if="{{ j>=i }}">
{{i}}*{{j}}={{i*j}}
</view>
</view>
</view>


// pages/nine/nine.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr:[1,2,3,4,5,6,7,8,9]
  },

  
})


// pages/nine.json
{
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTitleText": "乘法口诀",
  "navigationBarTextStyle": "white",
  "backgroundTextStyle": "dark"
}

运行后：

实现在页面输出菱形图案：

<!--pages/lozenge/lozenge.wxml-->
<view>
<text decode="true">  &nbsp; &nbsp; &nbsp; &nbsp;*</text>
</view>
<view>
<text decode="true"> &nbsp; &nbsp; &nbsp;***</text>
</view>
<view>
<text decode="true">  &nbsp; &nbsp;*****</text>
</view>
<view>
<text decode="true"> &nbsp;*******</text>
</view>
<view>
<text decode="true"> *********</text>
</view>
<view>
<text decode="true"> *********</text>
</view>
<view>
<text decode="true"> &nbsp;*******</text>
</view>
<view>
<text decode="true">  &nbsp; &nbsp;*****</text>
</view>
<view>
<text decode="true"> &nbsp; &nbsp; &nbsp;***</text>
</view>
<view>
<text decode="true">  &nbsp; &nbsp; &nbsp; &nbsp;*</text>
</view>

运行后：

判断是不是水仙花数：

<!-- whther-2.wxml -->
<view class="container">
  <view class="title">水仙花数判断</view>
  <input class="input" placeholder="请输入一个三位数" bindinput="inputChange" />
  <button class="button" bindtap="checkNumber">验证</button>
  <view class="result">{{result}}</view>
</view>


// pages/whter/whther-2.js
Page({
  data: {
    result: ''
  },
  inputChange(e) {
    this.setData({
      number: e.detail.value
    })
  },
  checkNumber() {
    const number = this.data.number;
    if (number.length !== 3) {
      this.setData({
        result: '请输入一个三位数'
      })
      return;
    }
    const digit1 = parseInt(number.charAt(0));
    const digit2 = parseInt(number.charAt(1));
    const digit3 = parseInt(number.charAt(2));
    const sum = Math.pow(digit1, 3) + Math.pow(digit2, 3) + Math.pow(digit3, 3);
    if (sum === parseInt(number)) {
      this.setData({
        result: '是水仙花数'
      })
    } else {
      this.setData({
        result: '不是水仙花数'
      })
    }
  }
})


whther-2.json
{
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTitleText": "水仙花",
  "navigationBarTextStyle": "white",
  "backgroundTextStyle": "dark"
}

运行代码：

在页面输出1000以内的水仙花数：

运行代码：

<!--pages/whter/whther.wxml-->

<view class="container">

<view class="narcissistic-numbers">
<text wx:for="{{narcissisticNumbers}}" wx:key="*this">{{item}}</text></view>
</view>


//whther.js
Page({ 
  data:{
  narcissisticNumbers: []
},
  onLoad: function () {
  this.Numbers();
},
  Numbers: 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});
}
  });


whther.json
{
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTitleText": "水仙花数",
  "navigationBarTextStyle": "white",
  "backgroundTextStyle": "dark"
}



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

运行截图：