1.利用wx:if及wx:for数据绑定来实现输出乘法口诀表的编程
九九乘法表运行结果
具体代码
xxx.js
// index.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
data: {
motto: 'Hello World',
userInfo: {
avatarUrl: defaultAvatarUrl,
nickName: '',
},
hasUserInfo: false,
canIUseGetUserProfile: wx.canIUse('getUserProfile'),
canIUseNicknameComp: wx.canIUse('input.type.nickname'),
},
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
onChooseAvatar(e) {
const { avatarUrl } = e.detail
const { nickName } = this.data.userInfo
this.setData({
"userInfo.avatarUrl": avatarUrl,
hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
})
},
onInputChange(e) {
const nickName = e.detail.value
const { avatarUrl } = this.data.userInfo
this.setData({
"userInfo.nickName": nickName,
hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
})
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
})
xxx.wxml
<view class='con'>
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
<view style='display:inline-block;width:35px' wx:for="{{[9,8,7,6,5,4,3,2,1]}}" wx:for-item="j">
<view wx:if="{{i<=j}}">
{{i}}*{{j}}={{i*j}}
</view>
</view>
</view>
</view>
xxx.wxss
.con{
font-size: 8px
}
xxx.json
{
"navigationBarTitleText":"乘法口诀表"
}
2.在Console控制台输出水仙花数
运行结果
具体代码
xxx.js
Page({
data: {
narcissisticNumbers: []
},
onLoad: function () {
const narcissisticNumbers = this.findNarcissisticNumbers();
this.setData({
narcissisticNumbers: narcissisticNumbers
});
},
isNarcissisticNumber: function (num) {
const strNum = num.toString();
const digits = strNum.length;
let sum = 0;
for (let i = 0; i < digits; i++) {
sum += Math.pow(parseInt(strNum[i]), digits);
}
return sum === num;
},
findNarcissisticNumbers: function () {
const narcissisticNumbers = [];
for (let i = 100; i < 1000; i++) {
if (this.isNarcissisticNumber(i)) {
narcissisticNumbers.push(i);
}
}
return narcissisticNumbers;
}
});
xxx.wxml
<view class="container">
<view wx:for="{{narcissisticNumbers}}" wx:key="{{index}}">
<text>{{item}} </text>
</view>
</view>
xxx.wxss
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.container text {
margin: 5px;
}
3.在页面输出水仙花数
运行结果
具体代码
xxx.js
Page({
data: {
narcissisticNumbers: []
},
onLoad: function () {
const narcissisticNumbers = this.findNarcissisticNumbers();
this.setData({
narcissisticNumbers: narcissisticNumbers
});
},
isNarcissisticNumber: function (num) {
const strNum = num.toString();
const digits = strNum.length;
let sum = 0;
for (let i = 0; i < digits; i++) {
sum += Math.pow(parseInt(strNum[i]), digits);
}
return sum === num;
},
findNarcissisticNumbers: function () {
const narcissisticNumbers = [];
for (let i = 100; i < 1000; i++) {
if (this.isNarcissisticNumber(i)) {
narcissisticNumbers.push(i);
}
}
return narcissisticNumbers;
}
});
xxx.wxml
<view class="container">
<view class="row">水仙花数共有:
<view wx:for="{{narcissisticNumbers}}" wx:key="{{index}}">
<text>{{item}} </text>
</view>
</view>
</view>
xxx.wxss
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.row {
display: flex;
flex-direction: row;
}
.container text {
margin: 5px;
}
4.页面输出菱形
运行结果
具体代码
xxx.js
Page({
data: {
diamondLines: []
},
onLoad: function () {
const diamondLines = this.generateDiamond(10);
this.setData({
diamondLines: diamondLines
});
},
generateDiamond: function (height) {
const lines = [];
for (let i = 1; i <= height; i++) {
let line = '';
for (let j = 1; j <= height - i; j++) {
line += ' ';
}
for (let k = 1; k <= 2 * i - 1; k++) {
line += '*';
}
lines.push(line);
}
for (let i = height - 1; i >= 1; i--) {
let line = '';
for (let j = 1; j <= height - i; j++) {
line += ' ';
}
for (let k = 1; k <= 2 * i - 1; k++) {
line += '*';
}
lines.push(line);
}
return lines;
}
});
xxx.wxml
<view class="container">
<view class="diamond">
<view wx:for="{{diamondLines}}" wx:key="{{index}}">
<text>{{item}} </text>
</view>
</view>
</view>
xxx.wxss
.container {
display: flex;
vertical-align: middle;
text-align: center;
}
.diamond {
margin-top: 40px;
}
.container text {
margin: 8px;
}