第二章作业

最新推荐文章于 2024-08-27 22:43:33 发布

十二月暮冰

最新推荐文章于 2024-08-27 22:43:33 发布

阅读量351

点赞数 8

文章标签：微信 xcode macos

本文链接：https://blog.csdn.net/Zik_Echo/article/details/136529857

版权

文章介绍了如何使用微信小程序(WX小程序)的语法如WXML和JavaScript编写代码，实现乘法口诀表的动态显示，以及水仙花数的判断功能，同时展示了菱形图案的动态生成。

摘要由CSDN通过智能技术生成

乘法口诀表

index.wxml

<view class='one' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="one">
  <view class='two' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="two" wx:if="{{one <= two}}">
    {{one}}*{{two}} = {{one*two}}
  </view>
</view>

idex.wxss

.one{
  display: flex;
  justify-content: flex-start; 
  font-size: 10px;
}

.one .two{
  width:45px;
}

json

{
  "navigationBarTitleText": "九九乘法表"
}

效果图

水仙花数

.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: '不是水仙花数'
      })
    }
  }
})

.json

{
  "navigationBarTitleText": "水仙花数"
}

.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>

效果图

页面中输入水仙花数

.js

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

.json

{
  "navigationBarTitleText": "水仙花数共有"
}

wxml

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

wxss

.one { 
  display: flex;
  flex-direction: column;
   align-items: center;
  justify-content: center;
   height: 100vh;
}

效果图

菱形

.wxml

<view class="one" wx:for="i">*</view>
<view class="two" wx:for="i">***</view>
<view class="three" wx:for="i">*****</view>
<view class="four" wx:for="i">*******</view>
<view class="five" wx:for="i">*********</view>
<view class="six" wx:for="i">*********</view>
<view class="seven" wx:for="i">*******</view>
<view class="eight " wx:for="i">*****</view>
<view class="nine " wx:for="i">***</view>
<view class="ten" wx:for="i">*</view>

.wxss

.one{
  display: flex;
  align-items: center;
  justify-content: center;
}
.two{
  display: flex;
  align-items: center;
  justify-content: center;
}
.three{
  display: flex;
  align-items: center;
  justify-content: center;
}
.four{
  display: flex;
  align-items: center;
  justify-content: center;
}
.five{
  display: flex;
  align-items: center;
  justify-content: center;
}
.six{
  display: flex;
  align-items: center;
  justify-content: center;
}
.seven{
  display: flex;
  align-items: center;
  justify-content: center;
}
.eight{
  display: flex;
  align-items: center;
  justify-content: center;
}
.nine{
  display: flex;
  align-items: center;
  justify-content: center;
}
.ten{
  display: flex;
  align-items: center;
  justify-content: center;
}

效果图