1.利用wx:if及wx:for数据绑定来实现输出乘法口诀表的编程
代码如下
index.wxml
<view class='lky'>
<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>
index.wxss
.lky{
font-size: 8px
}--字体大小
结果如下
2.编写程序,在Console控制台输出水仙花数(水仙花数是指一个3位数的各位上的数字的3次幂之和等于它本身。)
代码如下
index.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)) {
console.log(i);
narcissisticNumbers.push(i);
}
}
}
});
index.json
{
"navigationBarTitleText": "水仙花数"
}
index.wxss
<view class="ai">
<view wx:for="{{narcissisticNumbers}}" wx:key="{{index}}">
<text>{{item}} </text>
</view>
</view>
index.wxml
.ai{
display: flex;
flex-direction: column;
align-items: center;
}
结果如下
3.编写程序,在页面中输出水仙花数
代码如下:
index.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;
}
});
index.json
{
"navigationBarTitleText": "水仙花数"
}
index.wxml
<view class="one">
<view class='two'>水仙花个数有:
<view wx:for="{{narcissisticNumbers}}" wx:key="{{index}}">
<text>{{item}} </text>
</view>
</view>
</view>
index.wxss
.one {
display: flex;
flex-direction: column;
align-items: center;
}
.two {
display: flex;
flex-direction: row;
}
.one text {
margin: 5px;
}
结果如下
4.编写程序,在页面中输出菱形图案
代码如下
index.json
{
"navigationBarTitleText": "菱形"
}
index.wxml
<view class="a">
<view> *</view>
<view> *** </view>
<view> *****</view>
<view> *******</view>
<view>**********</view>
<view> *******</view>
<view> *****</view>
<view> ***</view>
<view> *</view>
</view>
index.wxss
.a{
margin-top:20px;
font-size: 22px;
text-align: center;
}
结果如下: